用css讓div重新排序

用CSS來重新排序你的div

若你是更改別人的網站,或是使用頁面編輯器(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 ,完成後直接保存,就可以在前台看結果啦!

留言
回到頂端