<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.main
{
100%;
background-color: black;
min-height: 30px;
float: left;
color: white;
}
.left
{
130px;
background: red;
min-height: 30px;
margin-left: -100%;
float: left;
}
.right {
290px;
background: yellow;
min-height: 30px;
float: left;
margin-left: -290px;
}
.text
{
margin-left: 130px;
margin-right: 290px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main"><div class="text">主要的我是主要的我是主要的我是主要的我是主要的</div>
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</body>
</html>
上面这个是双飞翼布局，下面是圣杯布局
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .wrap { padding-left:130px; padding-right: 290px; } .main { width: 100%; background-color: black; min-height: 30px; float: left; color: white; } .left { width: 130px; background: red; min-height: 30px; margin-left: -100%; position: relative; left: -130px; float: left; } .right { width: 290px; background: yellow; min-height: 30px; margin-left: -290px; right: -290px; position: relative; float: left; } </style> </head> <body> <div class="wrap"> <div class="main">主要的我是主要的我是主要的我是主要的我是主要的 </div> <div class="left"> </div> <div class="right"> </div> </div> </body> </html>