为什么元素没有水平排列答案

【问题标题】：Why are elements not lining up horizontally为什么元素没有水平排列
【发布时间】：2015-02-06 21:46:21
【问题描述】：

我有一个我正在尝试设计的网站，并且我有需要水平排列的元素，但是这不能正常工作。这些元素位于父包装 div 中，它们分别向左和向右浮动。在其中一个元素内还有一个图像 div，其周围有文本。到目前为止，我已经能够使用浮动正确地将文本环绕在图像 div 周围，但是页面上的其他元素没有正确排列。

这是一支笔和随附的代码：

http://codepen.io/anon/pen/WbXpZz

HTML

<body>
        <header></header>

        <div id="page">
            <div id="image"></div>

            <section>
                <h1>Lorem Ipsum</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>

                 <h1>Lorem Ipsum</h1>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
            <aside>
                <h2>Lorem Ipsum</h2>

                <ul>
                    <li>Lorem - <span>Ipsum</span></li>
                    <li>Lorem - <span>Ipsum</span></li>
                </ul>
            <aside>
        </div>
    </body>

CSS

body{
    background-color: rgb(128, 128, 128);
}

header, #image, #page{
    display: block;
}

header, #page, #image{
    float: left;
}

header, #page{
    position: absolute;
    z-index: 0;
}

header{
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: rgb(0, 0, 0);
    border-bottom: 3px solid rgb(171, 166, 27);
}

header ul{
    color: rgb(255, 255, 255);
    color: black;
}

header ul li{
    display: inline-block;
}

#page{
    top: 150px;
    left: 5%;
    right: 5%;
}

#image{
    width: 300px;
    height: 400px;
    margin-right: 2%;
    margin-bottom: 2%;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 25px;
    border: 3px outset rgb(171, 166, 27);
    box-shadow: 5px 5px 15px rgb(0, 0, 0);
}

section{
    display: block;
    float left;
    width: 80%;
    border-right: 3px solid rgb(171, 166, 27);
    background-color: blue;
}

section h1{
    font-size: 36px;
    font-weight: bold;
    color: rgb(255, 255, 255);
}

section p{
    font-size: 20px;
    color: rgb(0, 0, 0);
}

aside{
    display: block;
    float: right;
    width: 18%;
    background-color: red;
}

如果我将部分和旁边更改为内联块，它们会排成一行，但它们会在图像下方排成一行。此外，如果我绝对定位图像 div，所有内容都会按照应有的方式排列，但 section 中的文本不再环绕图像 div。有人可以帮忙吗？

【问题讨论】：

你想如何排列它们？
我希望 side 元素水平排列在 section 元素的右侧。不低于它

标签： html css responsive-design css-float

【解决方案1】：

要使其按照您希望的方式工作，您需要更改标记上的顺序：

发件人：

<div id="image"></div>
<section></section>
<aside><aside>

收件人：

<div id="image"></div>
<aside><aside>
<section></section>

浮动元素首先确保section的块行为不会影响浮动元素的流动。

CodepenDemo

【讨论】：

谢谢。自从我做 CSS 以来已经有一段时间了，我想我忘记了这条规则。
@Robert 很高兴能帮助你