圣杯布局

圣怀布局与双飞翼布局非常相似,实现同一种效果,只不过实现的方式有一点点区别。

两侧宽度固定,中间自适应,相当于三栏布局。

.container {
  padding: 0 250px 0 200px //将左栏向右挤,右栏向左挤 
}

.main {
  width: 100%;  //撑满,自适应宽度。
}

//浮动布局
.column {     
 float: left;
 height : 300px;
}

.left {
  width: 200px;
  background-color: pink;
   margin-lefg: -100%; // 向左移动整行的宽度,float 居左显示,盖到 main 左边。
   position:relative;
   left: -200px;  //左栏向左移动200:因被向右挤,再向左移回。
}

.right {
  width: 250px;
  background-color: orange;
  margin-left: -250px; //向左侧移动,盖到 main 右边;
  position:relative;
  right: -250;  // 右栏向右移动250:因被向左挤,再向右移动;
}



<div class="container">
  <div class="main">my name ia andy.</div>
  <div class="left"></div>
  <div class="right"></div>

</div>

代码解读:
1 main 左右撑开100%,自适应宽度;
2 left 与 right 浮动布局,被挤到第2行;
3 left 与 right 使用 margin-left 向左移动对应长度,盖在 main 上面;
4 container 父元素使用 padding 压缩布局空间,使空间左右留白;
5 left 与 right 使用 position + left/right 相对定位,分别移动到左右的空间里。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注