Question

我的div特别是 .mid-content 有问题。它占据了我的外部div .main-content 的整个高度，但我希望它低于我的其他两个内部div .posts 和 .sidebars 。相反，它位于 .sidebars 的左侧。

我尝试将 .mid-content div显示为一个块但问题仍然存在。我也尝试过使用容器div中的溢出设置，它会导致我的标题边框被删除。

这是我的代码

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width initial-scale=1">
  </head>
  <body>

    <div class="container">

      <div class="header">
        <ul class="navigation-bar">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>

      <div class="main-content">
        <div class="posts top-buffer">
          <div class="post">
            <h1>A Post About Something</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
            </p>
          </div> 
        </div>

        <div class="sidebars top-buffer">
          <div class="sidebar">
            <h1>Sidebar One</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
            </p>
          </div>
        </div>

        <div class="mid-content">
          <h1>
            This Should be below everything
          </h1>
        </div>

    </div>
  </div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    font-family: futura;
}

body {
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 80px;
    background-color: #777777;
    border: 3px solid black;
    border-radius: 5px;
}

.navigation-bar {
    height: 80px;
    width: 80%;

}

.navigation-bar > ul {
    margin: 0 auto;
}

.navigation-bar > li {
    width: 20%; 
    list-style: none;
    float: left;
}

.navigation-bar > li > a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
}

.navigation-bar a:hover, .navigation-bar a:active, .active {
    background-color: #ff8989;
}

.main-content {
    overflow: hidden;
}

.top-buffer {
    margin-top: 2%;
}

.posts {
    width: 55%;
    float: left;
    border: 3px solid black;
    padding: 2% 4%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 5px;
    background-color: #ffc893;

}

.sidebars {
    width: 26%;
    float: right;
    border: 3px solid black;
    border-radius: 5px;
    padding: 2% 3%;
    background-color: #b5ffb2;
}

.mid-content {
    width: 100%;
    display: block;
}

Answer 1

只需在clear: both div上使用.mid-content即可。查看下面的更新代码段

* {
    margin: 0px;
    padding: 0px;
    font-family: futura;
}

body {
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 80px;
    background-color: #777777;
    border: 3px solid black;
    border-radius: 5px;
}

.navigation-bar {
    height: 80px;
    width: 80%;

}

.navigation-bar > ul {
    margin: 0 auto;
}

.navigation-bar > li {
    width: 20%; 
    list-style: none;
    float: left;
}

.navigation-bar > li > a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
}

.navigation-bar a:hover, .navigation-bar a:active, .active {
    background-color: #ff8989;
}

.main-content {
    overflow: hidden;
}

.top-buffer {
    margin-top: 2%;
}

.posts {
    width: 55%;
    float: left;
    border: 3px solid black;
    padding: 2% 4%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 5px;
    background-color: #ffc893;

}

.sidebars {
    width: 26%;
    float: right;
    border: 3px solid black;
    border-radius: 5px;
    padding: 2% 3%;
    background-color: #b5ffb2;
}

.mid-content {
    width: 100%;
    display: block;
    clear: both;
    
}

<div class="container">

  <div class="header">
    <ul class="navigation-bar">
      <li class="active"><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </div>

  <div class="main-content">
    <div class="posts top-buffer">
      <div class="post">
        <h1>A Post About Something</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
        </p>
      </div> 
    </div>

    <div class="sidebars top-buffer">
      <div class="sidebar">
        <h1>Sidebar One</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
        </p>
      </div>
    </div>

    <div class="mid-content">
      <h1>
        This Should be below everything
      </h1>
    </div>

  </div>
</div>

Answer 2

将clear：两种样式添加到.mid-content类：

.mid-content {
    width: 100%;
    display: inline-block;
    clear: both;
}

这会强制div位于其上方的两列之下。

此外，将显示从块更改为内联块，您可以将余量和填充应用于div。

https://plnkr.co/edit/wJp9m0RKxuvAjn71rkFH?p=preview

Div占据容器的整个高度，但仍然位于底部

2 个答案: