如何设置每个列表项的相同高度?

时间:2015-04-15 08:24:43

标签: jquery html css height

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

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

4 个答案:

答案 0 :(得分:4)

假设li元素的长度是动态的,并且您无法使用CSS设置静态高度,则可以使用map的组合来获得所有高度,然后{{1将所有Math.max高度设置为最高的高度,使它们保持一致。试试这个:

li

Updated fiddle

答案 1 :(得分:0)

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

代码:

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

答案 2 :(得分:0)

即使你可以设置min-height:

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

答案 3 :(得分:0)

添加min-height或even height属性以包含它...您可以删除隐藏的溢出,因为这里不需要。

ul li {

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

}