有這樣一種情況，網頁主體部分有3欄，看上去分別是：左(left)、中(main)、右(right)三欄。但是它的html結構如下 ：
1 <div id="content"> 2 <div id="main"> 3 <p>Hello,CSS & HTML.</p> 4 <p>I love this game.</p> 5 </div> 6 <div id="left"> 7 <p>I'm the sub colum.</p> 8 </div> 9 <div id="right"> 10 <p>I'm the extra colum.</p> 11 </div> 12 </div>
現在，不能改變HTML的結構，請實現它們從左至右是分別是：left main right。
我能想到的實現它的方法常用有兩種：
第1種：絕對定位（本文忽略）
第2種：margin-left的負值與float的結合
下面我用第2種方法實現：
第1步：content固定寬度
1 #content { width:950px; overflow:hidden; margin-bottom:10px; }
第2步：main left right都浮動起來（但是main與left 的位置不對）
1 #main { float:left; width:550px; background:#dedede; } 2 #left { float:left; width:190px; background:#F90; } 3 #right { float:right; width:190px; background:#3CC; }
第3步：main往右邊擠，left往左邊擠（下面只列出不同的CSS部分，注意_display:inline是為了IE6）
1 #main { float:left; width:550px; background:#dedede; margin-left:200px; _display:inline; } 2 #left { float:left; width:190px; background:#F90; margin-left:-750px; }
最終，完整的CSS如下：
1 #content { width:950px; overflow:hidden; margin-bottom:10px; } 2 #main { float:left; width:550px; background:#dedede; margin-left:200px; _display:inline; } 3 #left { float:left; width:190px; background:#F90; margin-left:-750px; } 4 #right { float:right; width:190px; background:#3CC; }
本文在chrome firefox ie8 ie6下測試正常。本文到此結束！