列出具有相同高度的項目

Question

我創造了一個小提琴： http ： //jsfiddle.net/pQZ8f/

我希望兩個列表項都具有相同的高度，而無需手動設置高度。 我希望它能自動增長。 我不想使用javascript。 可以通過CSS完成嗎？

Answer 1

看來你正在尋找表格布局，所以最好的選擇是使用<table>而不是浮動<li>元素。

也就是說，您還可以在元素上指定表格樣式：

ul {
    display: table-row;
}

li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

這適用於大多數現代瀏覽器。 你會在這里找到一個更新的小提琴。

Answer 2

啊，是老同樣的高柱問題。

一種解決方案是使用底部邊距/填充物放屁。

適用於IE7 +（甚至可以使用ie6工作，我沒有安裝）

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle演示

Answer 3

它是2018年，我們有顯示：flex，瀏覽器支持率為97.66％（ https://caniuse.com/#feat=flexbox ）

使用flexbox，您需要做的就是：

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

這是小提琴： http ： //jsfiddle.net/pQZ8f/1076/

Answer 4

您可以在LI元素上使用： display：inline-table

li {
    width:100px;
    background: red;
    display: inline-table
}

這是JSFiddle

Answer 5

這取決於你為什么希望它們具有相同的高度：你想要達到什么樣的整體效果？

一個選項：如果您只是想嘗試匹配背景或其他東西，您可以將背景放在<ul>而不是<li> ， <ul>將自動擴展到其最大高度。兒童元素。

此外，如果您嘗試使它們具有相同的高度，以便可以對齊文本的底部 ，則可以組合display: inline-block而不是float ，以及horizontal-align: bottom; 。 這個小提琴的結果會給你一些至少看起來像<li>的高度相同的東西，但不適用於邊框。

Answer 6

為此，我使用jquery.matchHeight.js庫。 將class =“frame-height”添加到所有li元素，使所有li元素與最高li元素的高度相同。

Answer 7

List設置為表，它將包含表屬性。 對於列表項，當您設置表格單元格時，它們將獲得表格單元格屬性，默認情況下，所有表格單元格將獲得相同的高度。

<!--SCSS-->
.list {
     display: table;

    .list-item {
       display: table-cell;
    }
}



<!--html-->
<ul class="list">
    <li class="list-iteam">
        <h1>Heading</h1>
        <p>Details in text</p>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
        <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p>
    </li> 
</ul>

Answer 8

ul 
{
  display: table;
}

li
{
  display:table-cell;   
}