两边固定中间自适应的布局
Html:
<div id="main"> <div id="left"> </div> <div id="right"> </div> <div id="mid"> </div> </div>
CSS:
<style type="text/css"> body { margin: 0px; } #main { background-color: #006699; height: 500px; } /* 左列,默认的宽度是200 Pixel */ #left { float: left; width: 200px; height: 300px; background-color: #33CC33; z-index: 3; } /* 右列,默认的宽度是200 Pixel */ #right { float: right; width: 200px; height: 300px; background-color: #999999; z-index: 5; } /* 居中自适应 */ #mid { width: auto; height: 300px; margin: 0 210px; background-color: #999900; z-index: 1; } </style>