双飞翼布局
<!doctype html>
<html lang="en">
<head>
<!--淘宝双飞翼布局的布局的好处是让main里面的内容先渲染-->
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.container {
width: 100%;
}
.main {
width: 100%;
min-height: 30px;
float: left;
background: green;
}
.mainContentWrap{
margin-left:20%;
margin-right:20%;
}
.sub{
width:20%;
min-height:30px;
background: blue;
float: left;
margin-left:-100%;
}
.extra{
width:20%;
min-height: 30px;
background: red;
float: right;
margin-left:-100%;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<!--加入mainContentWrap是为了防止main里面的内容被sub和extra覆盖-->
<div class="mainContentWrap">
这里面是主要内容
</div>
</div>
<div class="sub">这里面是子内容</div>
<div class="extra">这里面是额外内容</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------
<!doctype html>
双飞翼布局
这里面是主要内容
这里面是子内容
这里面是额外内容
