CSS でコンテンツの長さが異なる列の高さを同じに維持するにはどうすればよいですか?

CSS: コンテンツの長さが異なる列の高さを同じに維持する

2 列レイアウト内では、各列内のリストを整列させることが望ましいコンテンツの長さが異なる場合でも、列は水平方向に表示されます。小さい画面では列が壊れる可能性があるため、レスポンシブ デザインではこれが課題となります。

JavaScript を使用せずにこの配置を実現するには、項目を兄弟として認識できるようにするメソッドが必要です。より広い画面サイズの場合は、適切なスタックを確保するために項目の順序を再配置する必要があります。

CSS とメディア クエリを使用したコードの更新バージョンは次のとおりです:

@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
}

このメディア クエリ.content 要素にフレックスボックス レイアウトを導入し、その子要素を柔軟に位置合わせしたり折り返したりできるようにします。順序プロパティにより、小さい画面で列が分割された場合でも項目が正しく積み重ねられることが保証されます。

視覚的に区別するために要素に境界線を追加するには、border-top、border-left、border-right の組み合わせを使用できます。 、および border-bottom は、水平方向と垂直方向のスタックの両方を考慮して追加のメディア クエリで調整されています。

以上がCSS でコンテンツの長さが異なる列の高さを同じに維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。