web-dev-qa-db-ja.com

同じ高さのリストアイテムのグリッドを取得するにはどうすればよいですか？

リストアイテムとinline-blockを使用して製品のグリッドを作成しようとしています。問題は、ブロックのコンテンツの高さが可変であり、inline-blockが高さを等しく維持しないことです。

コード：

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

これは問題を説明するための画像です。

内容に関係なく、大きいブロックと同じ高さを保つためにブロックが必要です。 this のようなものを作ることは可能ですか？

そして最後に：申し訳ありませんが、英語は私の母国語ではありません：）

gridheightcss
13
helltallica

1。以下をli CSSに追加すると、指定した画像の例を模倣します。

    height: 150px;
    min-height: 150px;
    overflow:auto;

2。また、他にいくつかのアプローチがあります：

11
JSuar

この問題や他の多くの問題を処理する「フレックスボックス」と呼ばれるW3Cの候補レイアウトがあります。高さの等しいボックスを実現するには、プロパティdisplay: flexをULに割り当て、display: blockをその内部のLIに割り当てるだけです。

例 （CodePen）

古いブラウザをサポートする必要がある場合は、それほど遠くまでは行きませんが:)回避できる場合、この方法は簡単で非常にクールです。

参照： Flexboxの完全ガイド

7
Jack Senechal

これを行う方法は、javascriptを除いてはないと思います。私の推奨は、定義された高さとおそらくoverflow:autoしたがって、コンテンツがオーバーフローした場合でも、サイトが機能しなくなり、読者は引き続きコンテンツを見ることができます。

2
Hawken

行div（行をマークするコンテナーdiv）なしで、divが増えて行が増えると、CSS Tricksの次の例が必要な処理を実行します。

行に同じ高さブロック

次のコードには8つのリスト項目があります。ロールごとに3つまたは4つのアイテムのみが表示される場合、指定された例では、すべてのdivの高さが行ごとに等しくなります。

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>
1
SPRBRN

まず、マージンを4辺すべてになるように調整すると、新しいラインへのフローで少し間隔が広くなります。

2番目に、すべての領域に共通の最小高さに指定するか、JavaScriptを実行して、特定の幅が指定された行で同じ高さに設定することができます。

1
Tracker1