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

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

试图学会手动设置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

来源

2016-01-31 user3200382

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

当你手动设置值（600px）时，容器和网格继承了那么多的价值并且得到了正确的安排。

来源

2016-01-31 08:08:23

这将解释的事情。我假设main_content的高度将根据它的孩子的高度进行（重新）计算，但我认为情况并非如此。 – user3200382

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

回答

相关问题