如何在不使用 JavaScript 的情況下垂直對齊 CSS 中不同父元素的元素？

CSS - 如何垂直對齊不同父物件中的子物件

要在不使用JavaScript 的情況下垂直對齊不同父物件中的子對象，請將它們設為兄弟姐妹並使用flexbox 控制它們的順序和flex 基礎。以下是實現此目的的方法：

更新的程式碼：

<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>

• 說明：

在寬度大於768px 的螢幕上，內容顯示為Flex 項目，其順序由order 屬性決定。 flex-basis 設定 Flex 項目的寬度每個項目，但為空 p 元素設定 100% 寬度，以確保其填充可用空間。 透過將內容 div 中的元素變成同級元素，它們能夠垂直對齊。 根據需要自訂媒體查詢中的斷點以符合 Bootstrap。 您也可以使用邊框屬性為元素新增邊框，並使用媒體查詢調整它們以支援垂直和水平對齊。

以上是如何在不使用 JavaScript 的情況下垂直對齊 CSS 中不同父元素的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！