div的布局有什么问题？

时间：2020-03-20 18:08:45

标签： html css

我对html和css相当陌生，在理解布局方面遇到了麻烦。这是我创建的一个示例来显示我的问题。

我希望#bottom位于#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>

7 个答案:

答案 0 :(得分：0)

从#bottom处删除左浮动

#bottom  {
  background-color:green;
  margin: 0 auto;
  height:50px;
  width:100px;
  border: 1px solid green;
}

这是链接：https://codepen.io/Dholu_Effect/pen/PoqByQa?editors=1100

我也建议您使用Flex-box，它将使事情变得简单得多。

答案 1 :(得分：0)

我不明白为什么要把这个float：left放在页脚中。如果删除它，一切都应该正常工作

#bottom  {
  margin: 0 auto;
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
}

答案 2 :(得分：0)

我只是在您的代码中做了一些调整，希望您满意：

注意：在全屏模式下查看会更加清晰。

#page {
  margin: 0 auto;
  width: 90vw;
  border: 1px solid black;
}
header {
    display: absolute;
    margin: 0px auto;
  height: 20vh;
    width: 80vw;
  border: 1px solid green;
}

#main  {  
  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  { 
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
  background-color:green;
}

#else  {
  height: 10vh;
  width: 90vw;
  background-color: pink;
  margin: 0 auto;
}
<div id="page">
        <header>header
        </header>
        <div id="main">main
        </div>       
        <div id="side">side
        </div>
        <div id="bottom">bottom
        </div>
    </div>
    <div id="else">else
    </div>

答案 3 :(得分：0)

 <body>
    <div id="page">
        <header>Header</header>
        <div id="main">Main</div>       
                <div id="side">Side</div>
      <div id="bottom">Bottom</div>
    </div>
    <div id="else">Else</div>
</body>

还有CSS 

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  {
  margin: 0 auto;
  height: 4vh;
  width: 90vw;
  border: 1px solid green;
  background-color:#ddd;
}

#else  {
  height: 10vh;
  width: 90vw;
  background-color: red;
  margin: 0 auto;
}

https://codepen.io/erwinagpasa/pen/ZEGjqjY

答案 4 :(得分：0)

我认为您可以看到此 

        header {
            display: block;
            margin: 0px auto;
            height: 20vh;
            width: 90vw;
            background-color: #011a2f
        }

        #page {
            margin: 0 auto;
            width: 90vw;

        }

        #main {
            float: left;
            height: 60vh;
            width: 67.5vw;
            background-color: #323232
        }

        #side {
            overflow: hidden;
            margin-left: 2px;
            height: 60vh;
            width: 22.5vw;
            background-color: #ff1e56;
        }

        #bottom {
            height: 5vh;
            width: 90vw;
            background-color: #000000;
        }

        #else {
            height: 10vh;
            width: 90vw;
            background-color: #ffac41;
            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>

答案 5 :(得分：0)

这是我可以为您提供的最接近的入门水平

*{
box-sizing:border-box; /* this will let the border/padding be included in the elements size */
}
#page {
  margin: 0 auto;
  width: 90%;
  border: 3px solid black;
}
header {
    display: inline-block;
    
    margin: 0 10%;
  height: 20vh;
    width: 80%;/* changed to percentage which is more logic to follow its parent not the viewport width */
  border: 1px solid green;
}

#main  {
  display: inline-block;
  height: 60vh;
  width: 67.5%;
  border: 1px solid green;
  margin:0;
  margin-left:5%;
}

#side  {
  display: inline-block;
  margin-left: 2px; 
  height: 60vh;
  width: calc(22.5% - 6px);/* 2 for the margin left, 4 for the borders*/
  border: 1px solid green;
  
}

#bottom  {
  /*float: left;*/
  margin: 0 auto;
  height: 4vh;
  width: 90%; /* percentage */
  border: 1px solid green;
}

#else  {
  height: 10vh;
  width: 90%;
  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>

答案 6 :(得分：0)

我的建议是您使用flexbox。这是我对HTML5选择器所做的快速响应设计。由于您是HTML / CSS的新手，所以建议您开始学习这种方式，并避免使用太多的div类，因为这对可访问性没有太大帮助，这在当今的开发世界中是一个巨大的问题。

还有here is a codepen可以玩。

/* 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 {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
  font-family: 'Roboto', sans-serif;
}

.content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  background: darkgray;  
}

header {
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ccc;
}

header h1 {
  font-size: 4rem;
  font-weight: 300;  
}

main {
  display: flex;
}

article {
  width: 70%;
  justify-content: flex-start;
  padding: 0.5rem;
}

aside {
  width: 30%;
  justify-content: flex-end;
  padding: 0.5rem;
}

.footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
}

@media (max-width: 600px) {
  main {
    flex-direction: column;
  }
  
  main > article, aside {
    width: 100%;
  }
}






* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

footer {
  background: #333333;
  color: white;
  margin: 0;
  text-align: center;
}
<div class="content">
  <header>
    <h1>Header</h1>
  </header>
  <main>    
    <article>
      <h3>Current Article</h3>
      <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>
      <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>
      <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>
      <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Nisi doloremque ut deserunt?</li>
        <li>Impedit aliquam itaque placeat.</li>
        <li>Sit incidunt iure assumenda.</li>
        <li>Inventore fuga optio perferendis!</li>
      </ul>
      <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>
      <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>
      <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>
      <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>
    </article>
    <aside>
      <h4>In other news:</h4>
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, culpa.</p>
      <p>Molestiae, officiis non esse perspiciatis provident a doloribus dignissimos sint!</p>
      <p>Inventore nihil illum maxime ipsa repudiandae quia omnis quae consequuntur!</p>
    </aside>
  </main>
</div>
<footer class="footer">
  Company Name | All rights reserved &copy;2020
</footer>

相关问题
最新问题