三欄布局（兩邊固定，中間自適應）

我的答案：

1 <

div 
class
="left"
>1
div>
2 <
div 
class
="center"
>2
div>
3 <
div 
class
="right"
>3
div>
4 <
style 
text
="type/css"
>
5 div
6 .left, .right
7 .center
8 style
>

網上答案

主要有定位，浮動和通過margin來控制布局三種方法。同時還給出了乙個三欄布局，中間固定，兩邊自適應的例子。

定位：

1

<
div 
id="left"
>左邊欄
div>
2<
div 
id="right"
>右邊欄
div>
3<
div 
id="main"
>主內容
div>
4html,body 910
#left,
11#right 
1718
#left 
2122
#right 
2526
#main

浮動：

<

div 
id="left"
>left 
div>
<
div 
id="right"
>right
div>
<
div 
id="main"
>mian
div>
#left,
#right 
#right
#main

負邊距：

1

<
div 
id="main"
>
2<
div 
id="maincontainer"
>main content
div>
3div
>
4<
div 
id="left"
>
5<
div 
id="leftcontainer"
class
="inner"
>left content
div>
6div
>
7<
div 
id="right"
>
8<
div 
id="rightcontainer"
class
="inner"
>right
div>
9div
>
10#main 
14#maincontainer 
19#left 
2425
#right 
3031
#left .inner,
32#right .inner

中間固定，兩邊自適應：

1

<
div 
id="left"
>
2<
div 
class
="inner"
>this is left sidebar content
div>
3div
>
4<
div 
id="main"
>
5<
div 
class
="inner"
>this is main content
div>
6div
>
7<
div 
id="right"
>
8<
div 
class
="inner"
>this is right siderbar content
div>
9div
>
10#left,
11#right 
1617
#main 
2223
.inner 
2627
#left .inner,
28#right .inner

這種方法如果在ie下會存在布局混亂的bug，你可以將div#right和div#left中的width值稍作修改：

1

#left,
2#right

css3 flexbox

1

<
div 
class
="grid"
>
2<
div 
class
="col fluid"
>
3...
4div
>
5<
div 
class
="col fixed"
>
6...
7div
>
8<
div 
class
="col fluid"
>
9...
10div
>
11div
>
12.grid 
19.col 
22.fluid 
25.fixed

有關flexbox的內容：

三欄布局（兩邊固定，中間自適應）

我的答案 1 div class left 1 div 2 div class center 2 div 3 div class right 3 div 4 style text type css 5 div 6 left,right 7 center 8 style 網上答案 主要有定位，浮動和通...

CSS 三欄布局，兩邊固定，中間自適應

基於純float實現的三欄布局需要將中間的內容放在html結構的最後，否則右側會沉在中間內容的下側原理 元素浮動後，脫離文件流，後面的元素受浮動影響，設定受影響元素的margin值即可 基於絕對定位的三欄布局 注意絕對定位的元素脫離文件流，相對於最近的已經定位的祖先元素進行定位。無需考慮html中結...

CSS三欄布局 中間固定兩邊自適應寬度

w3cplus 今天早上在阿當大俠的編寫高質量前端 群中與幾位朋友一起 和學習了一種用div css進行的三列 三欄 布局，而且是中間固定左右兩邊自適應寬度，聽起來蠻有意思的。因為以前只是碰到過，左右兩列固定而中間自適應的運用。於是思考一下馬上敲起了鍵盤自己實戰了一下，接著與大家一起測試，還是通過了...