Html 为什么元素没有水平排列_Html_Css_Responsive Design_Css Float

Html 为什么元素没有水平排列

html css responsive-design

Html 为什么元素没有水平排列,html,css,responsive-design,css-float,Html,Css,Responsive Design,Css Float,我有一个网站，我正试图设计，我有一些元素，需要水平排列，这是不正确的工作，虽然。这些元素位于父包装器div中，它们分别浮动在左侧和右侧。其中一个元素中还有一个image div，它周围有文本环绕。到目前为止，我已经能够使用float使文本正确地环绕image div，但是页面上的另一个元素没有正确排列这是一支笔和附带的代码： HTML <body> <header></header> <div id="page"&g

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

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

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>

如果我将截面和侧边更改为内联块，它们会对齐，但会在图像下方对齐。另外，如果我绝对定位图像div，则所有内容都会按应有的方式排列，但是

部分中的文本不再环绕图像div。有人能帮忙吗？
要使其按您希望的方式工作，您需要更改标记的顺序：
发件人：

您希望如何精确地排列它们？我希望aside元素水平排列到section元素的右侧。不低于它谢谢你。我已经有一段时间没有做CSS了，我想我忘了那个规则了。@Robert很高兴帮助你
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 id="image"></div>
<section></section>
<aside><aside>

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