與CSS相等的高度元素

我閱讀了幾種不同的解決方案來模擬等高的列或元素，但沒有一個真正引起我的注意，因爲他們使用黑客，難以置信的複雜HTML佈局或未被廣泛支持的屬性。與CSS相等的高度元素

下面是示例Fiddle。

我的目標是確保所有的元素具有相同的高度，或者至少是行中兄弟姐妹的最大高度。

一行由3個元素組成（在這種情況下，不存在行包裝，但我可能會考慮添加這樣的容器元素）。

是否有一個解決方案：

不需要JS
doesn't use display: table
不使用寬填充/保證金負值
doesn't require exponential uses of divs and float

來源

2012-05-25 Simone Carletti

隨着你所做的限制：不，沒有。

編輯：因爲你沒有提到這一點：你可以使用這個表。（歡迎回到90年代）

來源

2012-05-25 12:31:33 Christoph

不能說更好 –

我在想同樣的事情。儘管如此，我希望也許有人比我更聰明，能夠提供解決方案。這就是爲什麼我提出了這個問題，並贊成它。 – Ana

@Ana我有同樣的感覺，這是我的問題的原因。 –

您可以使用CSS3 flex屬性爲此。像這樣寫：

CSS 

.parent{ 
    display:-moz-box; 
    display:-webkit-box; 
    display:box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width:100%; 
    min-height:200px; 
} 

.parent div{ 
    background:red; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1; 
    border:2px solid green; 
}

HTML

<div class="parent"> 
    <div class="child">1</div> 
    <div class="child">2</div> 
    <div class="child">3</div> 
</div>

入住這http://jsfiddle.net/VkPmg/2/

來源

2012-05-25 13:25:47 sandeep

很酷。它是否適用於IE？（至少是最新版本）。 –

@SimoneCarletti不，這不是因爲我沒有告訴你這個解決方案：http://caniuse.com/#search=flex – Christoph

是不支持IE，但你可以使用http：// flexiejs。com/for IE支持 – sandeep

如果你有一個固定寬度的佈局，您可以僞造它的背景圖像。想象一下模擬邊界的平鋪圖像背景，您只需在主容器中重複y即可。

例如，如果您有一個400px的容器，並且有3個100px的盒子浮動（就像您的小提琴），您將不得不在主容器中重複一個1x400的圖像。只需在x圖像中添加1像素，就像使用邊框顏色一樣。並重復它！

使用這種技術，你的盒子將不會有相同的高度（實際上），但顯示器看起來像盒子有它，因爲較高的盒子將推動容器和背景將出現。

來源

2012-05-25 14:23:03

我不能使用這種黑客，因爲使用CSS圓角並不能很好地應用到這個解決方案。 –

與CSS相等的高度元素

回答

相關問題