JavaScript を使わずに CSS で異なる親からの要素を垂直方向に整列させるにはどうすればよいですか?

CSS - 異なる親の子を垂直に配置する方法

JavaScript を使用せずに、異なる親の子を垂直に配置するには、それらを兄弟にして次を使用します。フレックスボックスを使用して、順序とフレックスベースを制御します。これを実現する方法は次のとおりです:

更新されたコード:

<code class="css">@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

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

  .content h2 {
    order: 0;
  }
  .content p {
    order: 1;
  }
  .content p + p {
    order: 2;
    flex-basis: calc(100% - 30px);
  }
  .content ul {
    order: 3;
  }
}</code>

HTML コード:

<code class="html"><div class="content">
  <h2>Lorem ipsum Lorem ipsum</h2>
  <p>...</p>
  <p>...</p>
  <ul class="check">...</ul>
  <h2>Lorem ipsum</h2>
  <p>...</p>
  <ul class="check">...</ul>
</div></code>

説明:

• 768 ピクセルより広い画面では、コンテンツはフレックス アイテムとして表示され、その順序は順序プロパティによって決定されます。
• フレックス ベースは幅を設定します。各項目ですが、利用可能なスペースを確実に埋めるために、空の p 要素には 100% の幅が設定されます。
• コンテンツ div 内で要素を兄弟にすることで、垂直方向に整列することができます。
• 必要に応じて、メディア クエリのブレークポイントをブートストラップのブレークポイントと一致するようにカスタマイズします。
• 境界線プロパティを使用して要素に境界線を追加し、メディア クエリで境界線を調整して垂直方向と水平方向の両方の配置をサポートすることもできます。

以上がJavaScript を使わずに CSS で異なる親からの要素を垂直方向に整列させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。