如何使2個div繼承父div中哪個div的高度更高？

Question

我有麻煩匹配父div內的2 div的高度。對於我在Jsfiddle上做的解釋有點難。

http://jsfiddle.net/DSQpd/

基本上，我想要做的是企及的高度，無論這對較長。我已經嘗試在兩個時間都放height:100%;，但仍然無法正常工作。

謝謝！

Answer 1

去除浮和使用

display: table-cell; 

Demonstration

Answer 2

我知道這可能不是最優雅的或普遍的回答，但一個非常簡單的方法來做到這一點是使用<table>的辦法有兩個單行中的單元格。易維護，能跨瀏覽器等

Answer 3

添加邊距：-1000px和填充底：1000像素，div容器應當具有溢出：隱藏

.post { 
      width:685px; 
      margin:0 0 15px 0; 
      float:left; 
      background:#EEE; 
     overflow:hidden; 
     } 

      .tags { 
       width:250px; 
       height:100%; 
       padding:0 5px 0 5px; 
       float:left; 
       background:#273a47; 
       color:#FFF; 
       padding-bottom: 1000px; 
       margin-bottom:-1000px; 
      } 

      .content { 
       width:415px; 
       float:right; 
       padding:0 5px 0 5px; 
       background:#069; 
       color:#FFF; 

      padding-bottom: 1000px; 
       margin-bottom:-1000px; 
      } 

Answer 4

與實施的正確方法CSS3與flexible boxes。對於你的榜樣，加入以下達到預期的結果：

.post { 
    display: flex; 
} 

這是您fiddle與更新以上。

Answer 5

表是醜陋的。我也會考慮爲你的每個物品使用flexbox的魔力。唯一的問題是如果你使用Bootstrap或其他框架來提取動態數據。然後，每x元素使用'clearfix'類會更有意義，否則你將爲自己製作更多的代碼。然後，您可以隨時使用JavaScript來確定最高元素，並在您的div中複製這些元素。

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

#parent { display: flex; align-items: stretch; } 
#child { display: flex;}