如何为每个列表项设置相同的高度？答案

【问题标题】：How to set same height each list items?如何为每个列表项设置相同的高度？
【发布时间】：2015-04-17 00:32:15
【问题描述】：

我创建了一个包含内容的简单列表：

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

【问题讨论】：

标签： jquery html css height

【解决方案1】：

假设li元素的长度是动态的，你不能使用CSS设置静态高度，你可以使用map的组合来获取所有高度，然后Math.max设置所有@ 987654325@ 高度到最高的，所以它们是一致的。试试这个：

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

Updated fiddle

【讨论】：

【解决方案2】：

您可以为列表中的每个<li> 项目设置高度。见小提琴： http://jsfiddle.net/9hkyjjhq/

还有代码：

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

【讨论】：

【解决方案3】：

即使你可以设置最小高度：

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

【讨论】：

【解决方案4】：

添加一个最小高度甚至高度属性来包含它...您可以删除隐藏的溢出，因为这里没有必要。

ul li{

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

}

【讨论】：