等高布局

  1. 容器高度随着左右两边的增高而变化
  2. 通过padding-bottom: 10000px;和margin-bottom: -10000px;互相挤压，外容器隐藏溢出，形成自适应高度
<div class="wrap">
    <div class="left">
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
    </div>
    <div class="center">
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
    </div>
    <div class="right">
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
        &nbsp;页面内容<br/>
    </div>
</div>

.wrap {
    width:100%;
    margin:0 auto;
    overflow:hidden;
}
.wrap:after {
    content:"";
    display:block;
    clear:both;
}
.left {
    width:20%;
    background:Red;
    float:left;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}
.center {
    float: left;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    background-color: yellow;
    width: 60%;
}
.right {
    width:20%;
    background:blue;
    float:right;
    padding-bottom:10000px;
    margin-bottom:-10000px;
}

效果如下：

注意：如果要支持ie6，请加上针对ie6的清除浮动hack_zoom: 1;

双飞翼布局

布局原理

  1. 三栏布局
  2. 主要内容块在最前面（优先载入），但布局位于中间
  3. 两侧固定宽度，分别位于中间主要内容块的两侧，中间流式布局（自动调整宽度）
  4. 技术使用：float、margin(负边距)、position(relative)

优缺点

优点

  • 实现了内容与布局的分离，即Eric提到的Any-Order Columns.
  • main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
  • 任何一栏都可以是最高栏，不会出问题。
  • 需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
  • 在浏览器上的兼容性非常好，IE5.5以上都支持。

缺点

  • main需要添加一个额外的包裹层。

代码实现

html样式：

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

基本css：呈现三列布局

.container {
    overflow: hidden;
}
.main {
    float: left;
    width: 100%;
    background-color: #c0c0c0;
    height: 200px;
}
.left {
    float: left;
    width: 200px;
    background-color: #80ffff;
    height: 200px;
    margin-left: -100%;/*注意此时为100%*/
}
.right {
    float: left;
    width: 150px;
    background-color: #80ff80;
    margin-left: -150px;
    height: 200px;
}

处理中间块：解决中间块被掩盖的问题

<div class="container">
    <!-- 添加额外标签来解决 -->
    <div class="main">
        <div class="main-content">#main</div>
    </div>
    <!-- 添加额外标签来解决 -->
    <div class="left">left</div>
    <div class="right">right</div>
</div>

/*加入一条新的属性*/
.main-content {  
    margin: 0 230px 0 190px;
}

效果如下：

双飞翼布局完成啦！

同时，还可以给该布局加上登高布局的特性，就形成一个流式的布局

另一种实现方案 （absolute）(比较简单)

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

.container{
    position: relative;
}
.main {
    height:600px;
    background:#f60;
    margin:0 200px;
}
.left {
    width:200px;
    background:#fc0;
    height:600px;
    position:absolute;
    left:0;
    top:0;
}
.right {
    width:200px;
    background:#fcc;
    height:600px;
    position:absolute;
    right:0;
    top:0;
}

也可以加入等高布局的特性！

注意：如果要支持ie6，请加上针对ie6的清除浮动hack_zoom: 1;

（流式）栅格布局

原理

  1. 根据双飞翼布局实现的多套布局方案
  2. 可以根据网站的需求自定义一套自己的布局方案，即支持了流式布局，也有很好的兼容性，ie6只有轻微的hack处理 （hasLayout）

因为原理上大致相同就不做demo了（懒……）

资料参考

  • （转）栅格化系统demo
  • bootstrap的栅格系统