css - 高さの異なる div をグリッドに配置する

Question

この画像のようにレイアウトしたいサイトがあります。

デスクトップ:AB/CD/EF モバイル: ABCDEF

赤がデスクトップ版、黄色がモバイル版です。メディアクエリを使用して、この 2 つを簡単に切り替えることができます。

私の問題は、デスクトップバージョンの CSS をどのように記述するかということです。レイアウトによってデスクトップバージョンのレイアウト手法が除外されるため、モバイルバージョンのみを含めます。

各ペア (A と B など) 内のコンテンツの高さは異なる場合がありますが、それらは十分に類似しているため、次のペアのヘッダーが整列するように同じ高さに配置したいと考えています。

私が推測する最も簡単な方法は、各ペアの高さをハードコーディングすることですが、可能であれば避けたいと思います。

score 1 · Accepted Answer

これらの要素にはコンテナーを使用する必要があります。

たとえば、<ul>要素自体は<li>要素です。

html の例

<ul class="container">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
</ul>

デスクトップ CSS

ul.container li{
  width:45%;
  margin-right:5%;
  float:left;
}

ul.container li:nth-child(odd){
  clear:left;
}

モバイル CSS

ul.container li{
  width:100%;
}

知らせ

上記のコードは、ヘッダーのみを並べたい場合に機能します (左右の上部が同じ場所にあります)。ただし、実際の高さも揃えたい場合は、変更が必要になります (たとえば、下の境界線の場合)。

1 に答える 1