CSS布局之负margin-left的使用
有这样一种情况，网页主体部分有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下测试正常。本文到此结束！
