双飞翼布局与圣杯布局

2018-03-29

对两种布局的一些总结

双飞翼的思想是三栏全部左浮动，mid宽100%。left使用margin-left：-100%；right用margin-left：-自身宽度。为了使mid的内容不被挡住，中间再加一层wrap设置margin。参照http://www.cnblogs.com/langzs/archive/2013/01/27/taobaoshuangfeiyi.html

ps:负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行。

div:

<div class="main">
  <div class="wrap">hhhhhhhhhhhhhhhh</div>
</div>
<div class="sub"></div>
<div class="extra"></div>

css:

.main,.sub,.extra{
  float: left;
}
.main{
  height: 100px;
  width: 100%;
  background-color: #ccc;
}
.sub{
  margin-left: -100%;
  height: 100px;
  width: 100px;
  background-color: #333;
}
.extra{
  margin-left: -200px;
  height: 100px;
  width: 200px;
  background-color: #999;
}
.wrap{
  margin-left: 100px;
  margin-right: 200px;
}

圣杯布局也是三栏全部左浮动，但是他的mid层并没有多加一个div。而是总体多套了一个container。在把下面两个浮动的left，right用margin-left移到同一层后，如何将mid里的内容不被挡住呢？圣杯布局使用的方法是先将父容器左右padding设为左右两个容器的width值，然后再把left，right使用relative往左右两边都移动自身width值。参照https://www.cnblogs.com/gd-dql/p/7060160.html

<div class="container">
    <div class="middle">
        <h4>中间弹性区</h4>
    </div>
    <div class="left">
        <h4>左边栏</h4>
    </div>
    <div class="right">
        <h4>右边栏</h4>
    </div>
</div>

css

.middle,.left,.right{
  float: left;
}
.middle{
  width: 100%;
  background-color: #677;
}
.left{
  position: relative;
  left: -200px;
  width: 200px;
  background-color: #999;
  margin-left: -100%;
}
.right{
  position: relative;
  right: -200px;
  margin-left: -200px;
  width: 200px;
  background-color: #977;
}
.container{
  padding: 0 200px;
}