时间戳

首页 > 解决方案 > 响应式网页设计 - 元素之间的差距

html - 响应式网页设计 - 元素之间的差距

问题描述

我正在尝试通过使用创建响应式网络box-sizing: border-box; 我知道大多数（如果不是全部）都将其语义标签放在左侧。就我而言，我将两个sections给定的 60% 宽度和aside40% 的左侧浮动分开。留在aside右侧。

我遇到的问题是之间的差距，如果我安排在两者之间section.upper-sec，aside.right-col 那将是合乎逻辑的asidesection.upper-secsection.lower-sec

我也尝试过aside.right-col先写，然后是部分。但是，我不希望在断点处首先显示旁边。现在我知道你可以用 flexbox 重新排列所有元素，但我对 flexbox 还不够自信。

第二个问题是，有没有办法让section.lower-sec100% 的高度在页脚之间没有间隙，反之亦然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’&lt;/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 & Media Limited or its affiliated companies. All rights reserved.</p>
    </footer>
</body>
</html>

标签： htmlcssflexboxresponsivesemantics

解决方案

您可能需要查看 CSS 网格以了解当前标准的主要布局元素定位。 https://css-tricks.com/snippets/css/complete-guide-grid/ 您可以将它与 flexbox 结合用于内部元素。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 它还可以让您更好地控制响应式设计。

推荐阅读