码迷,mamicode.com
首页 > 其他好文 > 详细

常见布局

时间:2015-12-17 09:21:43      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

圣杯布局

效果:左右宽度固定,缩小页面,中间盒子随页面变化

原理:父盒子里三个子盒子,三个子盒子都左浮动,给左盒子margin-left:-100%,右盒子margin-left:右盒子的宽,这样在一个水平内,但左右盒子盖住中间的盒子

,给父盒子加padding值,在给左右盒子position:relative,(相对定位是相对于原来的位置)。

缺点:不能无限缩小,页面缩小到左右盒子宽的和时,布局会乱

解决:给body{min-width:大于左右盒子的宽度和}

常见布局

标签:

原文地址:http://www.cnblogs.com/wxlyq/p/5052966.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!