双翼布局-某个月黑风高的夜晚撸代码
<!DOCTYPE html>
<html>
<head>
<title>淘宝双翼布局</title>
</head>
<style type="text/css">
.box {
width: 100%;
overflow: hidden;
zoom: 1;
}
.main {
width: 100%;
float: left;
background: blue;
min-height: 30px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.sub {
width: 190px;
float: left;
margin-left: -100%;
background: red;
min-height: 30px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.addList {
width: 190px;
float: left;
margin-left: -190px;
background: #929292;
min-height: 30px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.main-wrap {
margin-left: 200px;
margin-right: 200px;
min-height: 30px;
}
</style>
<body>
<div class="box">
<div class="main">
<div class="main-wrap">我是主列</div>
</div>
<div class="sub">我是我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列我是子列子列</div>
<div class="addList">我是附加的列</div>
</div>
</body>
</html>
