三栏布局

最终效果

两侧宽度固定，中间宽度自适应的三栏布局

流体布局

利用浮动实现

圣杯布局

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

预留位置给两侧，三个均形成浮动

.container{
    height: 100px;
    margin-left: 150px;
    margin-right: 200px;
}
.main{
	float: left;
    width: 100%;
    height: 100px;
    background: green;
}
.left{
    float: left;
    width: 150px;
    height: 100px;
    background: red;
}
.right{
    float: left;
    width: 200px;
    height: 100px;
    background: blue;
}

把 left 放到预留位置，先用 margin-let 进行位移，然后用定位把自己移到预留位置

.left{
    float: left;
    width: 150px;
    height: 100px;
    margin-left: -100%;  /* 父级的宽度 */
    background: red;
}

.left{
    position: relative;
    right: 150px;
    float: left;
    width: 150px;
    height: 100px;
    margin-left: -100%;  
    background: red;
}

同理把 right 也移到预留位置

.right{
    position: relative;
    left: 200px;
    float: left;
    width: 200px;
    height: 100px;
    margin-left: -200px;
    background: blue;
}

最终代码

因为有预留位置，所以最好加上一个最小宽度，两边预留位置 + right + left，可以说是 $预留位置 * 2$

双飞翼布局

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

container、left、right形成浮动，用 main 来预留位置

.container{
    float: left;
    width: 100%;
}
.main{
    height: 100px;
    margin-left: 150px;
    margin-right: 200px;
    background: green;
}
.left{
    float: left;
    width: 150px;
    height: 100px;
    background: red;
}
.right{
    float: left;
    width: 200px;
    height: 100px;
    background: blue;
}

用 margin-left 移动到对应的位置上

.left{
    float: left;
    width: 150px;
    height: 100px;
    margin-left: -100%;  /* 向左位移 */
    background: red;
}
.right{
    float: left;
    width: 200px;
    height: 100px;
    margin-left: -200px;  /* 向左位移 */
    background: blue
}

最终代码

最小宽度：预留的位置