一、絕對定位法
兩邊用絕對定位，中間用margin，左右寬度固定，中間寬度不固定，中間主體放在左欄右欄後面（中間欄會佔據整行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width:400px;
height:500px;
background:red;
position:absolute;
left:0;
}
.center{
height:500px;
background:yellow;
margin-left:470px;
margin-right:470px;
}
.right{
width:400px;
height:500px;
background:red;
position:absolute;
right:0;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>二、自身浮動法
左欄左浮動，右欄右浮動，中間主體放在左欄右欄後面（中間欄會佔據整行），中間的寬度不固定，但是要加上margin左右的寬度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width:400px;
height:500px;
background:red;
float:left;
}
.center{
height:500px;
background:yellow;
margin-left:470px;
margin-right:470px;
}
.right{
width:400px;
height:500px;
background:red;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</body>
</html>三、兩列布局中再次運用兩列布局
兩列布局分別float:left和float:right，然後再在右欄中放兩個div，再float:left和float:right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width:33%;
height:500px;
background:red;
float:left;
}
.right{
width:66%;
height:500px;
background:red;
float:right;
}
.right1{
width:39%;
height:500px;
background:yellow;
float:left;
}
.right2{
width:60%;
height:500px;
background:blue;
float:right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
<div class="right1"></div>
<div class="right2"></div>
</div>
</body>
</html>