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

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

来源

2015-04-15 Ihor Tkachuk

假设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

来源

2015-04-15 08:27:42

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

，代码：

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

来源

2015-04-15 08:26:44 Billy

甚至可以设置最小高度：

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

来源

2015-04-15 08:28:22

添加最小高度甚至height属性包含它......你可以删除溢出因为在这里没有必要隐藏。

UL李{

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

}

来源

2015-04-15 08:37:05

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

回答

相关问题