具有相同高度

Question

列表項目我已經創建了一個小提琴： http://jsfiddle.net/pQZ8f/

我想有兩個列表項是相同的高度，而無需手動設置高度。我希望它能夠自動增長。我不想使用JavaScript。它可以通過CSS來完成嗎？

Answer 1

啊，老一樣的高度欄問題。

一個解決方案是放屁與底部邊距/填充。

作品在IE7 +（甚至可能使用IE6的工作，我沒有它安裝）

ul { 
    overflow: hidden; 
    border: 1px solid black; 
    float: left; 
} 
li { 
    float:left; 
    width:100px; 
    background: red; 
    padding-bottom: 10000px; 
    margin-bottom: -10000px; 
} 
li + li { 
    border-left: 1px solid black; 
} 

JSfiddle Demo

Answer 2

看來你正在尋找表格佈局，所以也許最好的辦法是使用<table>而不是浮動<li>元素。

這就是說，你也可以在你的元素指定表格樣式：

ul { 
    display: table-row; 
} 

li { 
    width: 100px; 
    border: 1px solid black; 
    display: table-cell; 
} 

這應該在最現代的瀏覽器。你會發現更新的小提琴here。

Answer 3

這取決於爲什麼你希望他們同樣的高度：什麼你試圖達到的整體效果？

一個選擇：如果你只是想匹配的背景什麼的，你可以把背景上<ul>，而不是<li>的和<ul>將自動擴展到任何的最大高度爲它的子元素。

此外，如果你想使它們具有相同的高度，因此您可以對齊文本的底部，你可以結合display: inline-block，而不是float和horizontal-align: bottom;。在這Fiddle的結果讓你至少有看起來像像<li>的是一樣的高度，但不會爲邊界工作。

Answer 4

您可以使用：顯示：內聯表您LI元素

li { 
    width:100px; 
    background: red; 
    display: inline-table 
} 

這裏是JSFiddle

Answer 5

我用jquery.matchHeight.js庫用於這一目的。添加類=「幀高度」所有裏元件，使所有裏元件相同的高度爲最高裏元件。

Answer 6

列表設置爲表格，它將包含表格屬性。 設置表格單元格時，它們將獲得表格單元格屬性，默認情況下，所有表格單元格將獲得相同的高度。

<!--SCSS--> 
.list { 
    display: table; 

    .list-item { 
     display: table-cell; 
    } 
} 



<!--html--> 
<ul class="list"> 
    <li class="list-iteam"> 
     <h1>Heading</h1> 
     <p>Details in text</p> 
    </li> 
    <li class="list-iteam"> 
     <h1>Heading 2</h1> 
    </li> 
    <li class="list-iteam"> 
     <h1>Heading 2</h1> 
     <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p> 
    </li> 
</ul> 

Answer 7

這是2018年，我們有顯示：柔性，以97.66％的瀏覽器支持（https://caniuse.com/#feat=flexbox）

隨着Flexbox的，所有你需要做的是：

ul { 
    display: flex; 
} 

li{ 
width:100px; 
border: 1px solid black; 
} 

這裏的小提琴： http://jsfiddle.net/pQZ8f/1076/