为什么元素没有水平排列

Question

我有一个我正在尝试设计的网站，我有一些元素需要水平排列，但是这不能正常工作。这些元素在父包装器 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;
}

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

Answer 1

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

发件人：

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

收件人：

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

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

为什么元素没有水平排列

Why are elements not lining up horizontally

html

css

responsive-design

css-float

CodepenDemo