与我联系

聊聊既熟悉又陌生的div+css布局

2015-6-27 一诺 html+css

首先说说最简单的两列自适应布局无外乎是给两列都设置百分比,但很多情况下这种布局并不能解决需求。
例如:下面这种一列限定宽度,一列自适应。


您可以修改框中代码后运行查看

还有种方法和上面有异曲同工之处。


您可以修改框中代码后运行查看

上面适用于简单的小模块布局,若是整个页面布局分左右两栏,一般处于对seo的考虑,需要优先加载右边主题内容,可以使用下面这种方法,屡试不爽,本博客就是这种布局


您可以修改框中代码后运行查看

上面都是使用浮动,下面来个绝对定位方法,但是这个要注意,给设置position:absolute的元素不要高度不要超过另外一个,不然会出现下面这种情况


您可以修改框中代码后运行查看

对于上面会超出的例子,有很多页面就是要这样的需求,这也无可厚非,例如:博客园首页的左侧栏 ,如果非要绝对定位,又不想让其超出,也可以这样。


您可以修改框中代码后运行查看

关于三列布局,左右两列定宽,中间一列自适应。


您可以修改框中代码后运行查看

下面分享一道布局面试题目,只使用三个div,不使用定位,实现下面效果(点击运行代码查看),亲可以试着做下后再看源码。


您可以修改框中代码后运行查看

以上代码亲测兼容主流浏览器和ie7以上(ie6未测),若有更好代码或问题欢迎交流讨论

标签: 布局

分享这篇文章
赞助鼓励:如果觉得内容对您有所帮助,您可以支付宝(左)或微信(右):

声明:如无特殊注明,所有博客文章版权皆属于作者,转载使用时请注明出处。谢谢!

发表评论:

皖ICP备15010162号-1 @2015 勿恨水长东
qq:1614245331 邮箱:13515678147@163.com Powered by
emlog