浮动布局之------margin

 上次用padding来控制左中右三列布局中的中部的位置，通过padding-left:xxxpx;来控制中部元素的位置。然后左侧栏向左浮动并设置合适的宽度将中部填充部分覆盖掉。现在采用另一种方法：margin来控制中部位置。

页面仍然是三栏布局格式。

<div id="container">

  <div id="middle"></div>

  <div id="right"></div>

  <div id="left"></div>

</div>

 

对应的CSS：

body{margin:0;padding:0;}

#container{width:750px;margin:0 auto;padding:0 ;background:#870;}

#middle{float:left;width:270px;margin:0 0 20px 195px;padding:0;height:600px;background:green;}

#right{float:left;width:270px;margin:0 0 20px 15px;padding:0;height:600px;background:red;}

#left{float:left;width:180px;margin:0 0 20px -750px;padding:0;height:600px;background:darkblue;}

 

为了能够看出效果，我给三列定义高度和背景色。

middle部分左侧margin值195px的设置给左侧栏留出了空间，左侧兰宽度180px，因此左侧栏和中部留有15px的空隙。

左侧栏margin值-750px，使其向左侧移动750px的距离从而紧贴页面左部。