两边固定中间子适应的流式布局
两边固定中间自适应的布局
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>
整体效果:
作者:樊勇
出处:http://www.cnblogs.com/fanyong/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
我的联系方式:fanyong@gmail.com
个人独立博客:www.fy98.com