圣杯布局和双飞翼布局
作者：互联网
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
#box{
padding:0 200px 0 100px;
height:100px;
}
#middle{
float:left;
width:100%;
height:100px;
background:blue;
}
#left{
float:left;
width:100px;
height:100px;
margin-left:-100%;
background:#0c9;
position:relative;
left:-100px;
}
#right{
float:left;
width:200px;
height:100px;
margin-right:-100%;
background:#0c9;
}
</style>
</head>
<body>
<div id="box">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
#box {
height: 100px;
}
#middle {
float: left;
width: 100%;
height: 100px;
background: blue;
}
#inside{
margin:0 200px 0 100px;
height:100px;
}
#left {
float: left;
width: 100px;
height: 100px;
margin-left: -100%;
background: #0c9;
}
#right {
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
</style>
</head>
<body>
<div id="box">
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
标签：float,圣杯,width,布局,100px,height,双飞翼,background,left 来源： https://www.cnblogs.com/MaShuai666/p/13173587.html