如何爲每個列表項設置相同的高度？

Question

我創建了一個簡單的列表的內容：

HTML部分：

<ul> 
    <li>1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate eius sit provident delectus veniam impedit dicta doloremque. Harum culpa a consequatur fugit dolorem facere inventore corporis temporibus eius labore soluta.</li> 
    <li>2) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum autem culpa quam fugiat hic architecto odit ipsam saepe temporibus sint.</li> 
    <li>3) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita officia cumque odit amet consequuntur alias qui dignissimos tempore adipisci tenetur molestias hic modi fuga ad quod beatae iusto. Molestias eius.</li> 
    <li>4) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint in pariatur soluta dignissimos aspernatur voluptatibus quis suscipit vel nulla laborum cumque vitae assumenda ducimus quas quaerat consectetur ea adipisci praesentium!</li> 
    <li>5) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam rerum laborum esse pariatur optio impedit laboriosam perferendis eius unde rem soluta facilis placeat nesciunt voluptates incidunt. Quidem earum eius magni.</li> 
</ul> 

我需要在2列，以顯示它。我添加了CSS：

ul { 
    overflow: hidden; 
    list-style:none; 
} 

ul li { 
    width: 50%; 
    float:left; 
    border: 1px solid #000; 
    box-sizing: border-box; 
} 

但是第三個元素依賴於第一個元素，從而破壞了結構。如何設置相同高度的所有元素的列表？

http://jsfiddle.net/k6jL8yxu/2/

更新：

我用СSS3解決了這個問題：

ul li:nth-child(odd) { 
    clear: left; 
} 

Updated JSFiddle

Answer 1

假設li元素的長度是動態的，使用CSS，你不能設置一個靜態的高度，你可以使用map組合以獲得所有高度，然後Math.max將所有li高度設置爲最高，以保持一致。試試這個：

var $li = $('li'); 
var maxHeight = $li.map(function() { 
    return $(this).height(); 
}).get(); 
$li.height(Math.max.apply(this, maxHeight)); 

Updated fiddle

Answer 2

您可以設置高度列表中的每個<li>項目。看到小提琴： http://jsfiddle.net/9hkyjjhq/

，代碼：

ul li { 
    width: 50%; 
    float:left; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    height:150px; 
} 

Answer 3

甚至可以設置最小高度：

ul li { 
    width: 50%; 
    float:left; 
    border: 1px solid #000; 
    box-sizing: border-box; 
    min-height: 150px; 
} 

Answer 4

添加最小高度甚至height屬性包含它......你可以刪除溢出因爲在這裏沒有必要隱藏。

UL李{

width: 50%; 
float:left; 
border: 1px solid #000; 
box-sizing: border-box; 
min-height: 200px; 

}