网页三列布局

“圣杯布局”

<!-- html -->
<div class="container">
    <div class="center column">center</div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>
/*css*/
.container .column{
    float: left;
    position: relative;
}
.container{
    padding-left: 200px;
    padding-right: 150px;
}
.left{
    width: 200px;
    margin-left: -100%;
    right: 200px;
    background-color: red;
}
.center{
    width: 100%;
    background-color: yellow;
}
.right{
    width: 150px;
    margin-right: -150px;
    background-color: green;
}

效果如下图所示：

这种布局方式在极端情况下有个问题，当父容器宽度不断变窄，窄到中间元素小于左侧元素宽度时，虽然中间元素能够优先显示，但是布局会发生一些错乱，如下图所示：

“双飞翼布局”就是针对上面这个问题提出的，该布局不使用相对定位的方式来使左边的元素进行偏移，而是在中间的元素上加了一层父容器，并留出相应的边距让左右两边元素能够顺利填充进来，具体实现如下：

<!-- html -->
<div class="container">
    <div class="center-warp column">
        <div class="center">center</div>
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>
</div>
/*css*/
.container{
    position: relative;
}
.column{
    float: left;
}
.center-warp{
    width: 100%;
}
.center-warp .center{
    margin-left: 200px;
    margin-right: 150px;
    background: yellow;
}
.left{
    width: 200px;
    margin-left: -100%;
    background-color: red;
}
.right{
    width: 150px;
    margin-left: -150px;
    background: green;
}

这样就保证了在极窄的情况下样式不会错乱，而只是不断缩小中间元素宽度，效果图如下：

作为前端新手，碰到三列布局，我的思路是通过定位来实现，我不太清楚这其中的利弊，下面是我的代码：

<!-- html -->
<div class="container">
    <div class="left column">left</div>
    <div class="center column">center</div>
    <div class="right column">right</div>
</div>
/*css*/
.container{
    position: relative;
}
.column{
    position: absolute;
    top: 0;
}
.left{
    width: 200px;
    left: 0;
    background-color: red;
}
.center{
    left: 200px;
    right: 150px;
    background-color: yellow;
}
.right{
    right: 0;
    width: 150px;
    background-color: green;
}

效果如下：

如果大家有更好的方法，欢迎留言！