经典布局案例
双飞翼布局
一般用于三栏布局,左右两栏相等,等比例缩放
<style>
body{margin:0px;}
.container{ 100%;overflow:hidden;}
.container div{float: left; min-height: 200px;margin-bottom:-9999px;
padding-bottom:9999px;}
.container .main{ 100%; }
.container .main div{margin: 0 120px;background: #ccc;float: none;margin-bottom: -9999px;}
.container .left{ 100px; margin-left:-100% ;background: red;}
.container .right{ 100px;margin-left:-100px;background-color: blue;}
</style>
<body>
<div class="container">
<div class="main">
<div>
中间
</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
圣杯布局
一般用于三栏布局,左右不相等,中间等比例缩放
<style>
body{margin: 0px;}
.container{padding: 0 200px 0 100px;}
.container div{float: left;height: 400px;position: relative;}
.container .main{ 100%;background: #ccc;}
.container .left{ 100px;left: -100px;margin-left: -100%;background-color: red;}
.container .right{ 200px; left: 200px; margin-left: -200px;background: blue;}
</style>
<body>
<div class="container">
<div class="main">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>