div 的布局有什么问题？

Question

我对 html 和 css 相当陌生，并且在理解布局方面遇到困难。这是我创建的一个示例来展示我的问题。

我期望 #bottom 位于 #page 内部，但位于 #page 下方。另外，我认为应该位于 #page 下方的 div #else 与 #bottom 位于同一空间。

你能帮我理解我在这里做错了什么吗？

header {

    display: block;

    margin: 0px auto;

  height: 20vh;

    width: 80vw;

  border: 1px solid green;

}

#page {

  margin: 0 auto;

  width: 90vw;

  border: 3px solid black;

}

#main  {

  display: block;

  float: left;

  height: 60vh;

  width: 67.5vw;

  border: 1px solid green;

}

#side  {

  display: inline-block;

  margin-left: 2px;

  height: 60vh;

  width: 21.5vw;

  border: 1px solid green;

}

#bottom  {

  float: left;

  margin: 0 auto;

  height: 4vh;

  width: 90vw;

  border: 1px solid green;

}

#else  {

  height: 10vh;

  width: 90vw;

  background-color: red;

  margin: 0 auto;

}

<div id="page">

        <header>

        </header>

        <div id="main">

        </div>       

        <div id="side">

        </div>

        <div id="bottom">

        </div>

    </div>

    <div id="else">

    </div>

Answer 1

我想你可以看到这个&nbsp; &nbsp; &nbsp; &nbsp; header {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0px auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 20vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 90vw;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #011a2f&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #page {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 90vw;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #main {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; float: left;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 60vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 67.5vw;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #323232&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #side {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-left: 2px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 60vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 22.5vw;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ff1e56;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #bottom {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 5vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 90vw;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #000000;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 10vh;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 90vw;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ffac41;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0 auto;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; <div id="page">&nbsp; &nbsp; &nbsp; &nbsp; <header></header>&nbsp; &nbsp; &nbsp; &nbsp; <div id="main"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="side"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="bottom"></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="else"></div>

Answer 2

我只是对您的代码做了一些调整，希望您没问题：注意：以全屏模式查看更清晰。#page {&nbsp; margin: 0 auto;&nbsp; width: 90vw;&nbsp; border: 1px solid black;}header {&nbsp; &nbsp; display: absolute;&nbsp; &nbsp; margin: 0px auto;&nbsp; height: 20vh;&nbsp; &nbsp; width: 80vw;&nbsp; border: 1px solid green;}#main&nbsp; {&nbsp;&nbsp;&nbsp; float: left;&nbsp; height: 60vh;&nbsp; width: 67.5vw;&nbsp; border: 1px solid green;}#side&nbsp; {&nbsp; display: inline-block;&nbsp; margin-left: 2px;&nbsp; height: 60vh;&nbsp; width: 21.5vw;&nbsp; border: 1px solid green;}#bottom&nbsp; {&nbsp;&nbsp; height: 4vh;&nbsp; width: 90vw;&nbsp; border: 1px solid green;&nbsp; background-color:green;}#else&nbsp; {&nbsp; height: 10vh;&nbsp; width: 90vw;&nbsp; background-color: pink;&nbsp; margin: 0 auto;}<div id="page">&nbsp; &nbsp; &nbsp; &nbsp; <header>header&nbsp; &nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; &nbsp; <div id="main">main&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div id="side">side&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div id="bottom">bottom&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="else">else&nbsp; &nbsp; </div>

Answer 3

我的建议是您使用 Flexbox。这是我使用 HTML5 选择器所做的快速响应式设计。由于您是 HTML/CSS 新手，我建议您开始以这种方式学习并避免太多div课程，因为这对于可访问性来说效果不佳，而可访问性是当今开发世界的一个大问题。这是一个您可以使用的代码笔。/* Roboto Font */@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');html {&nbsp; height: 100%;}body {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */&nbsp; font-family: 'Roboto', sans-serif;}.content {&nbsp; flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */&nbsp; background: darkgray;&nbsp;&nbsp;}header {&nbsp; height: 20vh;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; background: #ccc;}header h1 {&nbsp; font-size: 4rem;&nbsp; font-weight: 300;&nbsp;&nbsp;}main {&nbsp; display: flex;}article {&nbsp; width: 70%;&nbsp; justify-content: flex-start;&nbsp; padding: 0.5rem;}aside {&nbsp; width: 30%;&nbsp; justify-content: flex-end;&nbsp; padding: 0.5rem;}.footer {&nbsp; flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */&nbsp; padding: 20px;}@media (max-width: 600px) {&nbsp; main {&nbsp; &nbsp; flex-direction: column;&nbsp; }&nbsp;&nbsp;&nbsp; main > article, aside {&nbsp; &nbsp; width: 100%;&nbsp; }}* {&nbsp; box-sizing: border-box;}body {&nbsp; margin: 0;}footer {&nbsp; background: #333333;&nbsp; color: white;&nbsp; margin: 0;&nbsp; text-align: center;}<div class="content">&nbsp; <header>&nbsp; &nbsp; <h1>Header</h1>&nbsp; </header>&nbsp; <main>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <article>&nbsp; &nbsp; &nbsp; <h3>Current Article</h3>&nbsp; &nbsp; &nbsp; <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit vero quibusdam maxime magnam rerum nemo provident? Commodi, non! Ad facilis, doloribus voluptatum alias nostrum voluptatibus enim libero, distinctio nam sunt similique pariatur nesciunt accusantium eveniet perferendis ea doloremque molestiae culpa consequuntur quia aspernatur, itaque voluptate? Voluptatem magni delectus harum totam.</p>&nbsp; &nbsp; &nbsp; <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga rerum repudiandae error eveniet est explicabo, nihil eum. Inventore laboriosam consectetur dolor consequatur. Unde in doloribus repellendus dolorum perferendis officia hic?</p>&nbsp; &nbsp; &nbsp; <p>Dicta molestias doloremque, corrupti dolorum ipsum ea perferendis neque a, animi magnam ab sint impedit repudiandae aspernatur vel natus cum suscipit vero nisi nihil blanditiis iste laborum. Eum, sunt quo!</p>&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>Lorem ipsum dolor sit.</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Nisi doloremque ut deserunt?</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Impedit aliquam itaque placeat.</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Sit incidunt iure assumenda.</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Inventore fuga optio perferendis!</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus illum aut quia alias delectus labore, maiores, excepturi quae nisi a non consequuntur! Officia fugiat enim nostrum molestias ipsa! Deleniti, repudiandae!</p>&nbsp; &nbsp; &nbsp; <p>Illo, reprehenderit? Ipsum velit aut, ducimus minima in accusamus aperiam ex cumque recusandae tenetur architecto nemo repellat asperiores eum. Corrupti blanditiis, odio sequi ea ducimus ipsam temporibus culpa asperiores dicta.</p>&nbsp; &nbsp; &nbsp; <p>Maxime alias, natus veritatis quis mollitia itaque voluptate iure neque dolore, expedita eaque, in ea sunt quibusdam ut ducimus fugit doloribus! Corporis molestiae nobis quae nesciunt inventore alias sed error.</p>&nbsp; &nbsp; &nbsp; <p>Id est repellendus pariatur harum, hic sequi vero ab mollitia corporis nisi, consequuntur eaque doloremque, suscipit nobis velit dolore totam exercitationem facere voluptas iure? Temporibus eius minus vero aut cumque!</p>&nbsp; &nbsp; </article>&nbsp; &nbsp; <aside>&nbsp; &nbsp; &nbsp; <h4>In other news:</h4>&nbsp; &nbsp; &nbsp; <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, culpa.</p>&nbsp; &nbsp; &nbsp; <p>Molestiae, officiis non esse perspiciatis provident a doloribus dignissimos sint!</p>&nbsp; &nbsp; &nbsp; <p>Inventore nihil illum maxime ipsa repudiandae quia omnis quae consequuntur!</p>&nbsp; &nbsp; </aside>&nbsp; </main></div><footer class="footer">&nbsp; Company Name | All rights reserved &copy;2020</footer>

Answer 4

<body>&nbsp; &nbsp; <div id="page">&nbsp; &nbsp; &nbsp; &nbsp; <header>Header</header>&nbsp; &nbsp; &nbsp; &nbsp; <div id="main">Main</div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="side">Side</div>&nbsp; &nbsp; &nbsp; <div id="bottom">Bottom</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div id="else">Else</div></body>还有CSSheader {&nbsp; &nbsp; display: block;&nbsp; &nbsp; margin: 0px auto;&nbsp; height: 20vh;&nbsp; &nbsp; width: 80vw;&nbsp; border: 1px solid green;}#page {&nbsp; margin: 0 auto;&nbsp; width: 90vw;&nbsp; border: 3px solid black;}#main&nbsp; {&nbsp; display: block;&nbsp; float: left;&nbsp; height: 60vh;&nbsp; width: 67.5vw;&nbsp; border: 1px solid green;}#side&nbsp; {&nbsp; display: inline-block;&nbsp; margin-left: 2px;&nbsp; height: 60vh;&nbsp; width: 21.5vw;&nbsp; border: 1px solid green;}#bottom&nbsp; {&nbsp; margin: 0 auto;&nbsp; height: 4vh;&nbsp; width: 90vw;&nbsp; border: 1px solid green;&nbsp; background-color:#ddd;}#else&nbsp; {&nbsp; height: 10vh;&nbsp; width: 90vw;&nbsp; background-color: red;&nbsp; margin: 0 auto;}https://codepen.io/erwinagpasa/pen/ZEGjqjY