Блог

Главная - Вопросы по программированию - Адаптивный веб-дизайн — разрыв между элементами

Адаптивный веб-дизайн — разрыв между элементами

#html #css #flexbox #responsive #semantics

#HTML #css #flexbox #адаптивный #семантика

Вопрос:

Я пытаюсь создать адаптивный веб, используя box-sizing: border-box; Я знаю, что большинство, если не все, имеют свой семантический тег в стороне с левой стороны. В моем случае я разделил два sections с заданной шириной 60% каждый и aside с плавающей левой стороной 40%. aside Оставайтесь на правой стороне.

Проблема, с которой я сталкиваюсь, — это разрыв между section.upper-sec , и aside.right-col было бы логично, если бы я организовал aside промежуточный из section.upper-sec и section.lower-sec

Я также пробовал aside.right-col писать как первый, затем следуют разделы.. тем не менее, я не хочу, чтобы в стороне сначала отображалась точка останова. Теперь я знаю, что вы можете переставить все элементы с помощью flexbox, но я пока недостаточно уверен в flexbox.

Второй вопрос: есть ли какой-нибудь способ сделать section.lower-sec 100% высоту, которая не оставляет зазора между нижним колонтитулом и наоборот aside.right-col ? тест

 <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Test</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        nav{
            background-color: #EEE;
            float: left;
            padding: 20px;
            width: 100%;
        }
            nav ul{
                list-style-type: none;
                text-align: center;
            }
                nav ul li{
                    display: inline;
                    text-transform: uppercase;
                }
        .left{
            background-color: #2196F3;
            padding: 20px;
            float: left;
            width: 13.5%;
        }
        .main{
            background-color: #f1f1f1;
            padding: 20px;
            float: left;
            width: 55%;
        }
        .right{
            background-color: #4CAF50;
            padding: 20px;
            float: left;
            width: 31.5%;
        }
        section.upper-sec{
            background-color: grey;
            float: left;
            padding: 10px;
            width: 60%;
            text-align: center;
            height: 100%;
            outline: 1px solid red;
        }
        section.lower-sec{
            background-color: teal;
            float: left;
            padding: 10px;
            width: 60%;
            text-align: center;
            height: 100%;
            outline: 1px solid red;
        }
        aside.right-col {
            display: flex;
            flex-direction: column-reverse;
            background-color: green;
            float: right;
            text-align: center;
            outline: 1px solid red;
            width: 40%;
        }
        aside p{
            padding: 10px;
        }
            article{
                background-color: gold;
                display: flex;
                flex-direction: column;
            }
            #art1{
                margin: 10px;
                padding: 10px;
            }
            #art1 p{
                text-align: left;
            }
            #art1-W{
                text-transform: uppercase;
                font-size: 4em;
                font-weight: bold;
                float: left;
                margin-right: 5px;
                line-height: 0.8em;
            }
        footer{
            float: left;
            color: white;
            background-color: navy;
            padding: 10px;
            width: 100%;
            text-align: center;
        }
        @media screen and (max-width: 800px){
            .left, .main, .right{
                width: 100%;
            }
            section.upper-sec{
                width: 100%;
            }
            section.lower-sec{
                width: 100%;
            }
            aside.right-col{
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </nav>
    <div class="left">
        <p>left</p>
    </div>
    <div class="main">
        <p>main</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
    <section class="upper-sec">
        <h1>Breaking News</h1>
        <h5>Headliner</h5>
        <p> News content </p>
        <p> News content </p>
        <p> News content </p>
        <p> News content </p>
        <p> News content </p>
    </section>

    <section class="lower-sec">
        <h1>Spotlight</h1>
        <h5>Opinion</h5>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
        <p>News content</p>
    </section>

    <aside class="right-col">
        <p> Something on the right </p>
        <p> Something on the right </p>
        <p> Something on the right </p>
        <p> Something on the right </p>
        <article id="art1">
            <h1>‘The Godfather of trains’</h1>
            <h5>the Trans-Mongolian from Moscow to Beijing</h5>
            <p>For the author of Around the World in 80 
            Trains this was a standout journey, 
            full of captivating encounters that 
            could only happen on a train</p>
            <p><span id="art1-W">W</span> ith the air of melodrama unique to chic
            French women, the lady opposite me yanked open the overhead window then sat
            back down, grumbling to no one in particular and fanning herself with a
            copy of Paris Match. An aroma of pine filtered into the carriage and a
            breeze cooled my brow as the train clattered south to Béziers. Edging up to
            the window, I looked down to where a curl of sand and green water had
            appeared, an oasis where children bobbed about in dinghies and leapt off
            limestone rocks. This was the essence of why I love train travel: it allows
            me to see what’s behind the trees in the Massif Central; to smell the
            coconut being fried in huts in Kerala; and to spot rainbows hovering in the
            spray of Niagara Falls.</p>
        </article>
    </aside>
    <footer>
        <p>News amp; Media Limited or its affiliated companies. All rights reserved.</p>
    </footer>
</body>
</html>

Комментарии:

1. Должен ли зеленый прямоугольник (.rightcol) находиться между верхней и нижней секундами, когда окно становится меньше по ширине? Если это так, вы можете переместить rightcol между верхним и нижним sec, и это устранит верхний правый пробел.

2. Это наверняка устранит разрыв, но опять же, это разрушает мою структуру семантического потока

Ответ №1:

Возможно, вы захотите заглянуть в CSS grid для позиционирования основного элемента макета, который является текущим стандартом. https://css-tricks.com/snippets/css/complete-guide-grid/Вы можете использовать его в сочетании с flexbox для внутренних элементов. https://css-tricks.com/snippets/css/a-guide-to-flexbox/Это также даст вам лучший контроль над адаптивным дизайном.