短篇故事假設我的HTML已經固定下來：<div id="blockA">Block A</div><div id="blockB">Block B</div><div id="blockC">Block C</div>它看起來像這樣：------------| Block A |------------| Block B |------------| Block C |------------現在，我想切換塊的順序。我該如何僅使用CSS來做到這一點？------------| Block C |------------| Block A |------------| Block B |------------我知道有一些駭人聽聞的解決方案，例如using position:absolute，但這不能保留該display:block屬性的有效使用。也就是說，塊隨著大小的增加而向下推動其他塊。很長的故事當用戶使用計算機查看我的網頁時，這些塊將按以下順序顯示：基本信息?；顒訒r間表。iPhone應用廣告iPhone應用程序廣告排在最后，因為它對計算機用戶而言并不十分重要。一小部分計算機用戶會撥出電話并安裝該應用程序。如果移動用戶訪問此網站，則iPhone應用廣告應該是頁面上最重要的內容。因此，應將其移至頂部：iPhone應用廣告基本信息。活動時間表。我希望iPhone和計算機用戶共享相同的HTML，但是讓CSS媒體查詢切換塊的順序。@media only screen and (max-device-width: 480px) { #blockC { /* magic order switching */ }}
3 回答
富國滬深
TA貢獻1790條經驗 獲得超9個贊
兩種輕量級CSS解決方案：
使用柔性，柔性流動和順序：
body{
display:flex;
flex-flow: column;
}
#blockA{
order:4;
}
#blockB{
order:3;
}
#blockC{
order:2;
}
或者，反轉Y比例尺：
body{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div{
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
- 3 回答
- 0 關注
- 955 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消