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繼承高度？

回答

相關問題