如何在CSS中保持不同內容長度的列的高度相等？

CSS：保持不同內容長度的列的高度相等

在兩列佈局中，最好將每個列中的列表對齊水平列，即使內容長度不同。這對響應式設計提出了挑戰，因為列可能會在較小的螢幕上中斷。

要在沒有 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 元素引入了 Flexbox 佈局，允許其子元素靈活對齊和換行。順序屬性確保當列在較小的螢幕上中斷時，項目可以正確堆疊。

要為元素添加邊框以進行視覺區分，可以使用 border-top、border-left、border-right 的組合和 border-bottom，透過附加媒體查詢進行調整，以考慮水平和垂直堆疊。

以上是如何在CSS中保持不同內容長度的列的高度相等？的詳細內容。更多資訊請關注PHP中文網其他相關文章！