实现一个三列布局 左右固定 中间mainDIV 根据窗体大小而改变
<html> <head> <meta name="description" content="[三列布局 3 Cols]"> <style type="text/css"> body { margin: 0; } .way1 .left { width: 180px; height: 200px; float: left; background: #F39; } .way1 .right { width: 200px; height: 200px; float: right; background: #F99; } .way1 .center { width: auto; height: 200px; margin-left: 190px; margin-right: 210px; background: #C9C; } .way2 { padding: 0 150px 0 100px; } .way2 .main { float: left; height: 200px; width: 100%; /*将占满父元素的内容区域(padding内的区域)*/ background: #C9C; } .way2 .left { float: left; height: 200px; width: 100px; margin-left: -100%; left: -100px; position: relative; background: #F39; } .way2 .right { float: left; position: relative; height: 200px; width: 150px; margin-left: -150px; /*原本这一行装不下 会到下一行去*/ /*恰好使这个DIV的开始摆放位置减少150 就和main一行了*/ left: 150px; /*虽然是和main一行了 但是main右边有150大小的位置被遮住了*/ background: #F99; } </style> </head> <body> <div class="way1"> <div class="left"></div> <div class="right"></div> <div class="center"> 这种写法对HTML的顺序有要求 <p>两个浮动的元素要写在非浮动元素前面</p> </div> </div> <div class="way2"> <div class="main">圣杯布局(双飞翼布局) 同样对DIV顺序摆放有要求</div> <div class="left"></div> <div class="right"></div> </div> </body> </html>