突然在網(wǎng)上看到這兩種布局方式倦春，這里整理一下蜒茄，做個(gè)筆記，這兩種布局都是針對(duì) "三欄布局" 實(shí)現(xiàn) 左右固定寬度防症，中間自適應(yīng)寬度孟辑。
- 以下是兩種布局方式HTML結(jié)構(gòu) ( 這兩種方式都得中間部分放第一個(gè)位置 )
<!--圣杯布局HTML結(jié)構(gòu)-->
<div id="container">
<!--中間部分放第一個(gè)-->
<div id="center" class="column">我就是中間內(nèi)容部分了</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<!--雙飛翼布局HTML結(jié)構(gòu)-->
<div id="container">
<!--中間部分放第一個(gè)-->
<div id="center" class="column">
<!--比 圣杯布局 多一層內(nèi)容區(qū)域-->
<div class="main">我就是中間內(nèi)容部分了</div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
- 在看看分別的style樣式設(shè)定
- 這圣杯布局感覺比較麻煩，就不多說了蔫敲， 參照：holygrail
/**
* 圣杯布局樣式
**/
#container {
padding-left: 100px; /* LC width*/
padding-right: 100px; /* RC width*/
}
#container .column {
position: relative;
float: left;
}
#center {
width: 100%;
height: 500px;
background: #ddd;
}
#left {
width: 100px; /* LC width*/
right: 100px; /* LC width*/
margin-left: -100%;
height: 500px;
background: #f00;
}
#right {
width: 100px; /* RC width*/
margin-right: -100px; /* RC width*/
height: 500px;
background: #123;
}
/*** IE6 Fix ***/
* html #left {
left: 100px; /* RC width*/
}
- 雙飛翼布局 比 圣杯布局 中間部分多了一層div饲嗽，但樣式比 圣杯 少了些，更簡(jiǎn)潔方便奈嘿。
- 第一步：將三欄容器都設(shè)置浮動(dòng)：float: left;
- 第二步：將中間部分寬度設(shè)置百分百：width: 100%;
- 第三步：將左右欄布局設(shè)定固定寬度貌虾，如：width: 100px;
- 第四步：設(shè)置左邊欄，將左欄left設(shè)置 margin-left: -100% 這樣就把 left 拉到最左邊
- 第五步：設(shè)置右邊欄裙犹，同理設(shè)置 margin-left: -100px (負(fù)右欄的寬度)尽狠，這時(shí)候就把 right 拉到了最右邊
- 最后：由于中間部分是100%，左右兩邊內(nèi)容被 left 和 right 擋住了叶圃，需增加一個(gè)div容器袄膏，設(shè)置margin: 0 100px 0 100px 這樣就把容器內(nèi)容擠壓到了中間可見區(qū)域
/**
* 雙飛翼布局樣式
**/
#container .column {
float: left;
}
#center {
width: 100%;
height: 300px;
background: #ccc;
}
#center .main {
margin: 0 100px 0 100px;
}
#left {
margin-left: -100%;
width: 100px;
height: 300px;
background: #666;
}
#right {
margin-left: -100px;
width: 100px;
height: 300px;
background: #333;
}
本人自己還有一套布局方式，采用絕對(duì)定位實(shí)現(xiàn)掺冠，更簡(jiǎn)潔沉馆，在移動(dòng)端也常用，移動(dòng)端采用 上德崭、中斥黑、下
- 先看看HTML結(jié)構(gòu)
<!--絕對(duì)定位方式布局-->
<div id="center" class="column">我就是中間內(nèi)容部分了</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
- 在看看布局style樣式，三欄統(tǒng)一設(shè)置絕對(duì)定位眉厨，左右各自靠左锌奴，靠右，中間向左右各偏移100像素憾股，就OK了
.column {
position: absolute;
top: 0;
height: 300px;
}
#center {
left: 100px;
right: 100px;
width: 100%;
background: #ccc;
}
#left {
left: 0;
width: 100px;
background: #666;
}
#right {
right: 0;
width: 100px;
background: #333;
}
