三栏布局

最终效果

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

流体布局

<style>
.left {   
    float: left;   
    width: 100px;   
    height: 200px;   
    background: red;  
}  
.right {   
    float: right;   
    width: 200px;   
    height: 200px;   
    background: blue;  
}  
.main {   
    margin-left: 120px;   
    margin-right: 220px;   
    height: 200px;   
    background: green;  
}
</style>
<div class="container">     
    <div class="left"></div>     
    <div class="right"></div>     
    <div class="main"></div> 
</div>

圣杯布局

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

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

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

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

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

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

3. 同理把 right 也移到预留位置

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

4. 最终代码

<style>
.container{
    margin-left: 150px;
    margin-right: 200px;
}
.main{
	float: left;
    width: 100%;
    height: 300px;
    background: green;
}
.left{
    position: relative;
    right: 150px;
    float: left;
    width: 150px;
    height: 300px;
    margin-left: -100%;  
    background: red
}
.right{
    position: relative;
    left: 200px;
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    background: blue
}
</style>
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

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

双飞翼布局

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

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

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

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

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

3. 最终代码

<style>
.container{
    float: left;
    width: 100%;
}
.main{
    height: 300px;
    margin-left:150px;
    margin-right:200px;
    background: green;
}
.left{
    float: left;
    width: 150px;
    height: 300px;
    margin-left: -100%;  /* 向左位移 */
    background: red;
}
.right{
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;  /* 向左位移 */
    background: blue
}
</style>
<div class="container">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

4. 最小宽度：预留的位置