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;
}

如果我将部分更改为内联块，则它们会排成一行，但它们会在图像下面这样做。此外，如果我绝对定位图像div，一切都按照应有的方式排列，但section中的文本不再包围图像div。有人可以帮忙吗？

Answer 1

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

自：

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

要：

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

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

为什么元素没有水平排列

1 个答案:

CodepenDemo