如何为每个列表项设置相同的高度?
How to set same height each list items?
我创建了一个包含以下内容的简单列表:
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;
}
您可以为列表中的每个 <li>
项设置高度。请参阅 fiddle :
http://jsfiddle.net/9hkyjjhq/
和代码:
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
height:150px;
}
假设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));
甚至你可以设置最小高度:
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 150px;
}
添加一个 min-height 甚至 height 属性来包含它...您可以删除隐藏的溢出,因为这里没有必要。
李丽{
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 200px;
}
我创建了一个包含以下内容的简单列表:
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;
}
您可以为列表中的每个 <li>
项设置高度。请参阅 fiddle :
http://jsfiddle.net/9hkyjjhq/
和代码:
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
height:150px;
}
假设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));
甚至你可以设置最小高度:
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 150px;
}
添加一个 min-height 甚至 height 属性来包含它...您可以删除隐藏的溢出,因为这里没有必要。
李丽{
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 200px;
}