用CSS來重新排序你的div

此文章已於 2022-03-08 更新

若你是更改別人的網站，或是使用頁面編輯器（Page Builder）來客製網站，一定都會遇到一個問題「我想更改Widget裡面div的排序，但編輯器沒有選項可以調整，怎麼辦？」，除了自己重寫之外，還有諸多方式，今天要介紹的是使用table。

我們先來看html code

<div class="table">
    <div class="first-div"></div>
    <div class="second-div"></div>
</div>

首先，欲重新排序的兩個div外面一定要有一個父層的div，再來我們看一下CSS的部分

/*-- 用CSS重新排序 div --*/
.table   { display: table; }
.first-div  { display: table-footer-group; }
.second-div { display: table-header-group; }

父層的div要設定為table，接著我們看子層div的css，兩個要對調順序的分別設定 header 及 footer ，完成後直接保存，就可以在前台看結果啦！

相關文章