讓孩子div的最高孩子

的高度，我有兩個孩子<div>元素父容器<div>的內部，如圖：讓孩子div的最高孩子

<div class="row"> 
    <div class="item"> 
     <p>Sup?</p> 
    </div> 
    <div class="item"> 
     <p>Sup?</p> 
     <p>Wish that other guy was the same height as me</p> 
    </div> 
</div>

我嘗試以下CSS：

.item { 
    background: rgba(0,0,0,0.1); 
    display: inline-block; 
} 

.row { 
    border: 1px solid red; 
}

我怎樣才能得到兩個孩子（div.item）成爲最高孩子的身高？

的jsfiddle：http://jsfiddle.net/7m4f7/

來源

2013-05-16 Don P

這個問題已經被問進行多次。看到這個問題。 http://stackoverflow.com/questions/16592597/issue-with-responsive-columns-having-equal-height – Cam

簡單。簡單。 [帶有Flexbox的等高柱]（http://stackoverflow.com/a/33815389/3597276）。 –

一種解決方案是從inline-block顯示值改變爲table-cell爲後代div.item元素：

.row { 
    border: 1px solid red; 
    display: table; 
    border-spacing: 20px; /* For controlling spacing between cells... */ 
} 
.item { 
    background: rgba(0,0,0,0.1); 
    display: table-cell; 
}

Example

來源

2013-05-16 18:38:56 Yana

小心，table-cell是一個css3，不適用於所有瀏覽器。 – Cam

實際上'table-cell'值是在[CSS 2.1 Specification]中引入的（http://www.w3.org/TR/CSS2/visuren.html#display-prop） – Yana

請添加display：table和border-間距：20px 20px到您的小提琴中，使列更加明顯，謝謝！ http://jsfiddle.net/audetwebdesign/7m4f7/5/ –

另一種解決方案是使用Flexbox的：http://jsfiddle.net/7m4f7/4/

.item { 
    background: rgba(0,0,0,0.1); 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    -webkit-flex: 1; 
    -ms-flex: 1; 
    flex: 1; 
} 

.row { 
    border: 1px solid red; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
}

然而，支持是有限的（但越來越好！）見http://caniuse.com/flexbox

否則，你需要使用JavaScript來手動設置高度。

來源

2013-05-16 18:42:25 nullability

考慮到它的工作原理，假設我有很多子元素在我使用'inline-block'時被自動分成不同的行，但現在它們都被塞進一行。有沒有解決這個問題的方法。 – akabhirav

@akabhirav，是的 - 使用'flex-wrap：wrap; flex-direction：row;' – crishoj

jQuery的版本：FIDDLE

var maxheight = 0; 

$('div div.y').each(function() { 
    maxheight = ($(this).height() > maxheight ? $(this).height() : maxheight); 
}); 

$('div div.y').height(maxheight);

編輯：只注意到你不處理的<div>高度的，但<p>的

來源

2013-05-16 19:02:21 fnostro

讓孩子div的最高孩子

回答

相關問題