html - 同じ高さのアイテムを一覧表示する

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

ああ、古い同じ高さの列の問題です。

1つの解決策は、下マージン/パディングでおならをすることです。

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）

フレックスボックスを使用すると、実行する必要があるのは次のとおりです。

ul {
  display: flex;
}

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

これがフィドルです：http：//jsfiddle.net/pQZ8f/1076/

Answer 4

使用できるもの： display： LI要素のインラインテーブル

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

こちらがJSFiddleです

Answer 5

それはあなたがそれらに同じ高さを望む理由に依存します：あなたはどのような全体的な効果を達成しようとしていますか？

1つのオプション：単に背景などを一致させようとしている場合は、の<ul>代わりに背景を配置する<li>と<ul>、子要素の最大高さに合わせて自動的に拡張されます。

さらに、テキストの下部を揃えられるように同じ高さにしようとしている場合は、とdisplay: inline-blockの代わりに組み合わせることができます。このフィドルの結果は、少なくとも'が同じ高さであるように見えますが、境界線では機能しないものを取得します。floathorizontal-align: bottom;<li>

Answer 6

この目的のためにjquery.matchHeight.jsライブラリを使用します。class = "frame-height"をすべてのli要素に追加し、すべてのli要素を最高のli要素と同じ高さにします。

Answer 7

リストはテーブルとして設定され、テーブルのプロパティが含まれます。リストアイテムの場合、テーブルセルを設定すると、テーブルセルのプロパティが取得され、デフォルトではすべてのテーブルセルが同じ高さになります。

<!--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;   
}