如何在沒有 JavaScript 的情況下保持回應行的對齊

在回應行中保持兄弟姐妹的高度

當面對包含不同內容長度的列並且希望在其中保持對齊時，使用JavaScript沒有必要。透過修改CSS，我們可以創建靈活的佈局，在不破壞行動端優化的情況下滿足所需的功能。

關鍵是讓每列中的項目成為直接同級，這樣它們就可以「看到」彼此。然後，我們使用媒體查詢根據螢幕寬度重新排列它們的順序。這確保了在較寬的螢幕上，項目是並排的，而在較窄的螢幕上，它們是垂直堆疊的。

更新的程式碼：

要實現這一點，我們引入了一個內容類，它包裝了每列中的所有元素：

<code class="css">.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}</code>

內容中的各個元素被賦予自訂寬度：

<code class="css">.content > * {
  flex-basis: calc(50% - 30px);
}</code>

媒體查詢：

對於更寬的螢幕，我們使用媒體查詢對元素重新排序並調整其寬度：

<code class="css">@media (min-width: 768px) {
  .content h2 {
    /*  1st row  */
    order: 0;
  }

  .content p {
    /*  2nd row  */
    order: 1;
  }

  .content p + p {
    /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);
  }

  .content ul {
    /*  4th row  */
    order: 3;
  }
}</code>

附加說明：

• 您可能需要針對不同的螢幕尺寸調整媒體查詢斷點和flex-basis 值。
• 為了考慮高度不同的元素，您可以使用附加媒體查詢將邊框屬性套用到各個元素。

以上是如何在沒有 JavaScript 的情況下保持回應行的對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！