前端布局:左右布局

2016/10/28 1015
目录
[隐藏]

前端布局中左右布局太容易遇到了,大布局上后台管理系统里这种布局最频繁,小布局上,一个评论布局都是左边头像右边评论的,我最近在做的仿gitbook的界面也是左右布局的,来看一下样子,我是拿来做关于页的样子的,所以在做的过程中忽然觉得应该整理下关于左右布局的东东。

左右布局01

左右布局都有哪些?怎么做?首先左右布局有左定宽右定宽度布局,这太简单了就不讲了。

我们来讲讲,[左边定宽、右边自适应];[左边不定宽、右边自适应];

左右布局02

相反的情况,[左边自适应、右边定宽];[左边自适应、右边不定宽],就反着来。

以下代码均可直接复制粘贴使用,并且附带说明优缺点兼容性问题。
html的代码都是这样的:

效果图都是这样的:
左右布局03

左边定宽、右边自适应

1.左边左浮动,右边加个margin-left,用Hack。

优点:通过Hack的方法,现在浏览器支持IE6,原来没Hack之前这个布局是有缺点的,IE7以及以上浏览器可以,但IE6不行。在IE6因为一个是浮动。一个没有浮动,那么右边的那个文字会有3像素的偏移BUG。

2.左边左浮动,右边加个margin-left,动Html结构。
同样用浮动+margin-left,如何做到兼容IE6的那个3像素的偏移BUG呢,答案是动Html结构。
html的代码就变成这样的了,在right外面再套一层div。

CSS代码变成这样就可以了:

这个布局的缺点就是动了Html结构,优点就是IE6也可以,没有3像素偏移的BUG。

3.左边左浮动,右边加个overflow:hidden;

这个布局的缺点是IE6不支持的,优点是代码也是很简单。设置过overflow:hidden以后就会触发BFC模式,也就是说会形成独立的与外界隔离不受影响的常规层,所以即使设置浮动对右边的div也不受影响。

3.左右两边绝对定位

这个布局也是IE6支持的,用定位总是感觉有点那个什么,似乎都不怎么有人用。

4.用table,表格布局来试试

这个布局相对前面的来说太不好用了,不过我检测了好久,所以还是写出来给大伙看看,这个布局IE7是不支持的,因为table-cell,而且不能设置左右两个div中间的间隙,内外边距都不管用,这是我用IE测试过的,欢迎来拍砖,因为我也觉得奇怪,暂时不用这个。

5.用Flex布局来试试

当然Flex布局的只能IE11开始才有用,现在肯定用不了,而且Flex布局太复杂的结构会有性能问题,只能div里的结构都是简单的,小范围的使用时候会推荐用它,但为了将来做准备嘛,还是记一笔。

左边不定宽、右边自适应

1.左边浮动,右边overflow:hidden;

这个布局左边宽度跟着内容走,但很遗憾,IE6是不支持的,

2.用Flex布局

这个布局,IE11以下浏览器都不支持,而且结构简单,小范围使用的情况下才推荐,不然会有性能问题,不过Flex就是很强大。
总而言之,以上方法均在浏览器测试过,是我能想到的所有方法了,赶紧收藏吧,用的时候,复制粘贴代码就可以,平时不用记忆。

分享本文: