![](/img/trans.png)
[英]How can I set groups of three list items to be the same height as the tallest?
[英]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
元素的長度是動態的,並且不能使用CSS設置靜態高度,則可以使用map
的組合來獲取所有高度,然后使用Math.max
將所有li
高度設置為最高高度,因此是一致的。 嘗試這個:
var $li = $('li');
var maxHeight = $li.map(function() {
return $(this).height();
}).get();
$li.height(Math.max.apply(this, maxHeight));
您可以設置列表中每個<li>
項目的高度。 看到小提琴: http : //jsfiddle.net/9hkyjjhq/
和代碼:
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
height:150px;
}
即使您可以設置最小高度:
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 150px;
}
添加一個min-height甚至height屬性來包含它...您可以刪除隱藏的溢出,因為這里沒有必要。
ul li {
width: 50%;
float:left;
border: 1px solid #000;
box-sizing: border-box;
min-height: 200px;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.