歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!

如果把上面的問題稍微改變一下,要求展示一個左中右布局,而且左右固定,中間自適應,這要如何實現呢?

估計很多人會這樣想:

css中.flexibleColumn樣式添加一個屬性:margin-right: 40px;

html中再追加一個固定列,在右側浮動:

<div class="fixedColumn" style="float: right;"></div>

然后運行的效果是...左中布局,右邊空白,瀏覽器出現滾動條,右固定列換行后右浮動了。

然后我們做一個小小的改動——把剛才添加的右浮動固定列的dom放到自適應列前面,也就是說html的dom順序是左浮動,右浮動,自適應的順序!html如下:

css實現div兩列布局(兩種方法)

 

效果就“神奇”的實現了~

這里一個注意點就是:浮動元素在dom中要在非浮動元素的前面,否則非浮動元素后面的浮動元素會換行。

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/template/m58775.shtml

久久天天躁狠狠躁夜夜躁2020