我生待明日,万事成蹉跎

关于自适应左右布局

左右布局在前端开发中经常遇到,但是实现方法五花八门,自己也一直比较纠结该使用哪种方式,今天将收集到的一些方法总结一下,以备后用。

1、左右定宽布局

浮动应该是实现左右布局的最常用的方式,下面就是使用浮动制作左右布局的效果。

i’m left

i’m right

如果左右两边的宽度确定,则可以左栏使用float:left; 右栏使用float:right; 这样可以解决ie6下3像素bug的问题。关于ie3像素bug。

2、左栏定宽,右栏自适应宽度

left

right

<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=”#” 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 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下也可以。

最后成都SEO提醒下,container2和container3是不能设置overflow:hidden;属性的,否则就会将container2和container3触发为BFC(block formatting context,详细定义后续再写文章解释下吧)。一旦触发为bfc就会隔断浮动,也就是说如果container3触发为bfc,则col1, col2, col3三列的浮动只在container3中起作用,即使你在col1中设置了position:relative;left:70%;移位属性也不能跨越container3的边界。不知道我理解的对不对:)。

未经允许不得转载:徐宏涛博客 » 关于自适应左右布局

分享到:更多 ()

评论 抢沙发

评论前必须登录!