三列布局

三列html

<div  class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>

中间自适应。左右定宽。

body{
  margin:0; padding:0;   //清除默认样式
}
.left{
  background-color:yellow;
  width:200px;                 //左定宽
  height:300px;
  position:absolute;
  left:0;
  top:0;                    //靠近左侧,顶部。 绝对定位相对于body
}
.center{
  background-color:gray;
  height:300px;
  margin:0 210px;             //外边距左右留左宽和右边宽度的位置
}
.right{
  background-color:black;
  width:200px;
  height:300px;
  position:absolute;    //绝对定位
  top:0;                //靠近右侧,顶部。
  right:0;
}

  

猜你喜欢

转载自www.cnblogs.com/xxh-2014/p/9034871.html