左右布局在前端开发中经常遇到,但是实现方法五花八门,自己也一直比较纠结该使用哪种方式,今天将收集到的一些方法总结一下,以备后用。
1、左右定宽布局
浮动应该是实现左右布局的最常用的方式,下面就是使用浮动制作左右布局的效果。
如果左右两边的宽度确定,则可以左栏使用float:left; 右栏使用float:right; 这样可以解决ie6下3像素bug的问题。关于ie3像素bug请参考这里。
2、左栏定宽,右栏自适应宽度
<div style="margin: 0 auto;"> <div style="width: 200px; height: 100px; float: left; background-color: #95f49e;">left</div> <div style="background-color: #fff; height: 100px; border: 1px solid #ccc;">right</div> </div>
方法1:左栏使用float:left; 如果左栏的div是一幅图片,想让右边的文字围绕图片显示,则去掉右边的div,将文字直接写入左栏div的后面即可。这种方式同样在ie6下会有3px的bug。
方法2:使用负margin
<div id="demoLayout" style="width: 500px;"> <div style="min-height: 170px; padding: 10px;"> <div class="demoShowPic"><img src="http://www.hicss.net/wp-content/uploads/2011/toygersKittens.jpg" alt="toygers kittens" width="200" height="166" /></div> <div style="margin: -170px 0 0 215px;">负margin能够替代float浮动布局,进行左右布局规划,并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。现如今,负margin技术的应用可谓越来越广,任一个大型站点惊鸿一瞥之下都会有其身影所在。</div> </div> </div>
使用负margin的好处是,改变父div的宽度时,右边文字div会自适应。但是使用负margin也有个问题,即如果内部最后一个子元素使用负margin上移后,由于父元素是其边距元素,其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高 度,最小高度值为较小的固定元素高度(此例即为左边固定的图片高度),就可彻底解决负margin上移影响父元素高度Bug。
3、三列等高
三列等高布局,并且不允许使用背景平铺,这好像是一个公司的面试题。网上有个牛人使用背景分离的方式实现,且不使用任何expression和hack,记下链接。
源码为:
<style> .col1{ width:30%;float:left;position:relative;left:70%;} .col2{ width:40%;float:left;position:relative;left:70%;} .col3{ width:30%;float:left;position:relative;left:70%;} .container1{background-color:yellow; float:left; overflow:hidden;} .container2{background-color:blue; float:left;position:relative; right:30%;} .container3{background-color:red; float:left;position:relative;right:40%;} </style> <div class="container1"> <div class="container2"> <div class="container3"> <div class="col1">this is first col Heroku和Morph实验室是Ruby on Rails的托管提供商,提供运行Ruby on Rails应用的整套环境。和传统的托管商相比,他们并不仅仅是提供一个服务器给你,而且提供有趣的工具和接口来帮助你更加容易的工作,使你从繁重的安 装、配置、管理和保证服务器安全中解脱出来。两者皆是使用Amazon的EC2网格计算技术来运行应用,因此你可以毫不担心可伸缩性与性</div> <div class="col2">this is second col</div> <div class="col3">this is third col</div> </div> </div> </div>
这里面需要注意一点:容器也必须是左浮动的,否则背景颜色无法显示,容器相对定位移动自然无法达到预期效果。
这个问题有必要解释下:一个父div包含多个子div时,如果子div设置了浮动,父div没有设置高度,此时浮动的子div就离开了原来的布局,因此父div就没有高度了(不设置浮动时父div的高度是由于被子div的内容撑开了,所以才有高度),自然父div的背景也就没了。
可见父容器背景无法显示是由于父容器没有了高度,解决方法还有其他几种:
a)除了给父div也增加浮动外,还有一种方法。就是在<div class="col3">this is third col</div>后面再加一个<div class="clear" style="clear:both;height:0;"></div>,这样即使三个父容器不加浮动也可以达到预期效果。clear:both;即清除左右的浮动,使当前的div独占一行,这样父容器的高度就等于Max(col1.height,col2.height,col3.height)+clear.height。height:0;是为了修正ie下的bug。当然这样的一个弊端就是增加了一个无语义的标签,不太友好。
b) 只适用于ie。既然父容器没有了高度,就强制让父容器有高度,在ie下触发父容器的haslayout属性,可以通过设置父容器的zoom:1;属性达到目的。即 .container3{background-color:red; zoom:1;position:relative;right:40%;}这样在ie下也可以。
最后在提醒下,container2和container3是不能设置overflow:hidden;属性的,否则就会将container2和container3触发为BFC(block formatting context,详细定义后续再写文章解释下吧)。一旦触发为bfc就会隔断浮动,也就是说如果container3触发为bfc,则col1, col2, col3三列的浮动只在container3中起作用,即使你在col1中设置了position:relative;left:70%;移位属性也不能跨越container3的边界。不知道我理解的对不对:)。
在ie7下需要给container1,container2,container3都加上width:100%属性。