Question

JSFiddle

尝试学习手动设置12列网格。我希望我的grid_8和grid_4扩展到相同的高度。它们被设置为继承高度，就像它们的父级（“容器”）一样，所以我的想法是它们都应该匹配最外层div的高度“main_content”，我认为我已经设置它以动态地改变它的高度

容器和grid_8 div似乎正确匹配高度，但为什么不是我的grid_4 div？如果我手动修复main_content div的高度，那么它们都可以正确地扩展高度，但为什么它在这种情况下不起作用？

对于我不理解的内容，我们将不胜感激。

HTML：

<body>
  <div class="main_content">
    <div class="container">
      <div class="grid_8">
        <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."

          "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>
      </div>
      <div class="grid_4">
        <p>
          This should be the same height as the div to my left.
        </p>
      </div>
    </div>
  </div>
</body>

CSS：

body{
  margin: 0px;
  box-sizing: border-box;
}

.container {
  width: 964px; /* Account for borders */
  height: inherit;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid red;
}

div[class^="grid"]{
  float: left;
  margin: 0 auto;
  height: inherit;
}

.grid_4 {
  width: 320px;
  border: 1px solid blue;
}

.grid_8 {
  width: 640px;
  border: 1px solid green;
}

.main_content{
  overflow: hidden;
  /* height: 600px; */
  border: 1px solid black;
}

JSFiddle

Answer 1

我可以看到你没有为main_content提供任何高度，因此网格也没有继承任何高度。所以他们得到的高度只是因为他们内心的内容。

当您手动设置值（600px）时，容器和网格将继承这么多值并正确排列。

CSS - Side-by-Side Divs继承高度？

1 个答案: