DIV+CSS 三欄布局實(shí)例代碼
發(fā)布時(shí)間：2012-06-14 12:55:04 作者：佚名 
我要評(píng)論
我要評(píng)論DIV+CSS 三欄布局實(shí)例代碼，主要是用了position:absolute
1.要求：如上圖中的，三欄目布局，中間的MAIN是自適應(yīng)瀏覽器的寬度，左LEFT固定寬200PX，右RIGHT固定寬200PX;
.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
2.現(xiàn)在要求先加載MIAN，其它要求同上面一樣;
總結(jié)：主要是利用浮動(dòng)元素的負(fù)外邊距;
并且要理解float和絕對(duì)定位，這兩種元素的寬度都是根據(jù)內(nèi)容的寬度來(lái)的。
相對(duì)定位和塊級(jí)元素，如果不設(shè)定寬，都是100%(相對(duì)于父級(jí)的寬)
.boxmain{float:left;margin-right:-200px;width:100%;}
.right,.left{height:300px;width:200px; z-index:1;}
.right{ position:absolute; right:0; background:#000000;}
.left{position:absolute;left:0; background:#009933;}
.main{margin-right:200px;background:#F60; height:300px;margin-left:200px;}
<div class="boxmain">
<div class="main">main</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
完整代碼：
提示：您可以先修改部分代碼再運(yùn)行
復(fù)制代碼
代碼如下:.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>
2.現(xiàn)在要求先加載MIAN，其它要求同上面一樣;
總結(jié)：主要是利用浮動(dòng)元素的負(fù)外邊距;
并且要理解float和絕對(duì)定位，這兩種元素的寬度都是根據(jù)內(nèi)容的寬度來(lái)的。
相對(duì)定位和塊級(jí)元素，如果不設(shè)定寬，都是100%(相對(duì)于父級(jí)的寬)
復(fù)制代碼
代碼如下:.boxmain{float:left;margin-right:-200px;width:100%;}
.right,.left{height:300px;width:200px; z-index:1;}
.right{ position:absolute; right:0; background:#000000;}
.left{position:absolute;left:0; background:#009933;}
.main{margin-right:200px;background:#F60; height:300px;margin-left:200px;}
<div class="boxmain">
<div class="main">main</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
完整代碼：
提示：您可以先修改部分代碼再運(yùn)行
相關(guān)文章
這篇文章主要介紹了CSS經(jīng)典三欄布局方案（6種方法）的相關(guān)資料,詳細(xì)的介紹了6種三欄布局的方法，具有一定的參考價(jià)值，有興趣的可以了解一下2017-12-01
本篇文章主要介紹了淺談CSS三欄布局的Ｎ種實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-08-18- 可能有人不理解三欄布局是什么，其實(shí)三欄布局頁(yè)面分為左中右三部分，然后對(duì)中間一部分做自適應(yīng)的一種布局方式，下面這篇文章就給大家詳細(xì)介紹了CSS實(shí)現(xiàn)三欄布局的四種方法2017-01-24
CSS三欄布局探討——中間固定寬度兩邊自適應(yīng)寬度
下面和大家一起探討和學(xué)習(xí)了一種用div+css進(jìn)行的三列（三欄）布局，而且是中間固定左右兩邊自適應(yīng)寬度，聽起來(lái)蠻有意思的。因?yàn)橐郧爸皇桥龅竭^，左右兩列固定而中間自適應(yīng)2013-12-13- 這篇文章就是總結(jié)一下怎樣使用CSS中的float屬性進(jìn)行布局，其實(shí)網(wǎng)上有很多討論這個(gè)話題的文章了，但我覺得都沒說到點(diǎn)子上。那就來(lái)老生常談一次吧，CSS之Float布局2013-07-22
css實(shí)現(xiàn)三欄布局的幾種方法及優(yōu)缺點(diǎn)
三欄布局在實(shí)際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁(yè)，即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考2018-09-29
