如何僅使用 CSS 重新排序 HTML 區塊元素？

用於重新排序區塊元素的CSS

尋求一種僅透過CSS 重新排列HTML 區塊元素順序的方法可能是一個挑戰。這個問題解決了這個問題，旨在切換三個區塊的順序，而不影響它們作為區塊元素的顯示行為。

CSS 解決方案

提供的解決方案利用 CSS flexbox 。透過將父元素設定為display:flex和flex-flow:column，元素會垂直堆疊。然後，使用 order 屬性，可以自訂子元素的順序。例如，#a {order:2;} 會將 id="a" 的元素移到第二個位置。

實作

要實現此解決方案，首先將父元素設定為顯示為 Flex 容器：

#parent { display: flex; flex-flow: column; }

接下來，使用 order屬性變更子元素的順序elements:

#a { order: 2; }
#b { order: 3; }
#c { order: 1; }

媒體查詢注意事項

為了適應不同的螢幕尺寸，可以使用媒體查詢來控製版面。例如，以下規則將切換最大寬度為300px 的螢幕上的區塊的順序：

@media screen and (max-width: 300px) {
  #parent {
    display: flex;
    flex-flow: column;
  }
  #a { order: 2; }
  #b { order: 3; }
  #c { order: 1; }
}

範例

這裡有一個簡化的範例：示範這個概念：

<div><p>調整瀏覽器視窗的寬度來觀察div 元素的順序如何變化。 </p></div>

以上是如何僅使用 CSS 重新排序 HTML 區塊元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！