在很多网站的布局中,都有这样的效果,那就是左右两列宽度固定,中间一列宽度自适应。
本站的头部其实就有这样的功能,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style> * { margin: 0; padding: 0; } body { padding: 20px; } #main { float: left; width: 100%; background-color: green; height: 400px; } #left { width: 200px; height: 500px; float: left; margin-left: -100%; background-color: red; margin-right: 20px; } #right { margin-left: -120px; float: left; background-color: blue; width: 120px; height: 500px; } </style> </head> <body> <div id="main"></div> <div id="left"></div> <div id="right"></div> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
* { margin: 0; padding: 0; } body { padding: 20px; }
进行一些初始化的设置,首先设置所有元素的内边距和外边距都为0。
然后设置body的内边距为20px,便于效果的观察。
#main { float: left; width: 100%; background-color: green; height: 400px; }
这个是中间一列元素。
左浮动,宽度是百分之百。
#left { width: 200px; height: 500px; float: left; margin-left: -100%; background-color: red; margin-right: 20px; }
设置为左浮动。
代码的关键是margin-left: -100%,元素的边界是由外边距确定的,所以将外边距设置为负数,那么中间一列元素就可以伸展到左列的下面。关于负外边距的具体用法可以参阅相关阅读。
二.相关阅读:
(1).负外边距可以参阅css margin外边距一章节。
(2).float可以参阅float浮动用法详解一章节。
左右两列宽度固定,中间一列宽度自适应代码实例,这样的场景在实际项目中还是用的比较多的,关于左右两列宽度固定,中间一列宽度自适应代码实例就介绍到这了。
左右两列宽度固定,中间一列宽度自适应代码实例属于前端实例代码,有关更多实例代码大家可以查看。
本文地址: http://www.zzsi.net/code/web/98452.html
本站部分资源来源与网络,仅供学习参考使用,请勿商用,如侵犯了您的权益,请联系我们删除。