一、绝对定位法
两边用绝对定位,中间用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>