今天开始说2列布局吧。
?
仍然分为html与css两部分来讲。
?
html部分仍然非常简单。就是下面这个两层div的结构。其中,外层用一个class叫做content包裹起来。内侧有2个容器,分别叫做left和right。
?
?
<div class="content"> <div class="left"> left box </div> <div class="right"> right box </div> </div>
?
接下来是css的部分。
?
关于两列布局,最主要应用的一个css属性就是float。float的作用主要有2个,本节会讲解其中的一个――用来让两个或两个以上块级元素呈现横向排列。
?
float这个属性有三个属性值。分别是left,right,none。
float:left表示一个容器向左浮动。
float:right表示容器向右浮动。
float:none表示容器不浮动(注意区分清除浮动)。通常没有写float的元素,float都是none的,我们不需要写。那么这个float:none有什么用呢?比如你写了个继承。用上面的html举例子吧。如果你写了这样一段css
?
?
.content div{float:left;} .content div.right{float:none;}
?这段css的第一行,表示让content中所有的div元素左浮动。而这时候我们希望class="right"的那个div不浮动,就可以用第二行的代码覆盖掉第一行的属性值啦~
?
一般的两列布局,也分为两种情况。
?
1,外容器固定宽度,左右两列也固定宽度。
?
2,外容器没有固定宽度,左侧固定宽度,右侧不固定宽度。(或者右侧固定宽度,左侧不固定宽度)也就是传说中的自适应宽度。
?
无论是上面的哪种情况。由于只是涉及到呈现的形式,所以,只是css不同。html的代码是几乎不变的。
?
我们首先来讲自适应宽度的吧!因为其实固定宽度,可以看成是自适应宽度的,给了外层content一个固定宽度而已。其他的代码几乎是相同的。
?
左右布局的css写法,大概有下面这么几种常用的。我以左侧固定宽度,右侧自适应宽度作例子。左侧宽度为200px。
?
方法一:left元素左浮动。right元素以margin-left的方式对齐。
?
示例图:
首先我们需要让左侧浮动起来,并且给左侧固定的宽度。于是我们用到了:
?
?
.left{width:200px;float:left;}?
?
接下来,刷新下浏览器,是否发现 left box和right box这两段文本已经放在一行啦?而且中间有一定距离啦。那个距离,应该就是由200px产生的。为了更清楚的确认左右两个容器的范围,我们给两边各分别定义一个背景色。
?
定义背景色,用到的css属性叫做background-color。
?
.left{width:200px;float:left;background-color:#3ff;} .right{background-color:#3f3;}
?
这时候我们看起来已经成功了吧?
?
可是当你在右侧再增加一些文本的时候。。。让文本多到至少2行以上的时候。。就发现问题了。在除了IE6以外的浏览器下,除了left以外的所有区域,背景色都被填满了。但是IE6看起来还算正常吧?貌似会有一条小百边,这个稍后会讲到的。先表好奇啦~~
?
这时候,我们就需要用到margin-left属性啦~~写在right上。
?
?
.left{width:200px;float:left;background-color:#3ff;} .right{background-color:#3f3;margin-right:220px;}
?
?
margin-left的值,通常需要大于等于左侧left的宽度。否则,左右仍然有可能有重叠的区域。
?
但是,这也不是最完整的代码。。如果用屏幕尺来测量IE6下右侧容器的位置,与其他浏览器下对比,会发现,IE6下的右侧容器位置与其他浏览器下右侧容器的位置不同,似乎向右偏移了3个像素。因此,我们需要为IE6写hack。
?
IE6的hack需要用 “_属性:属性值”这样表示。我们需要将margin-left的值在IE6下减去3像素。
?
当我们在左侧填写1行文本,而右侧是2行文本的时候,还会发现另外一个问题:第二行的文本向左侧偏移了3px。这个时候,我找到的解决方案仍然是hack。在right上用zoom:1来出发haslayout。
?
zoom属性本身是缩放的意思。而zoom:1等同于缩放值为100%,也就是原大小。而在IE6下,zoom:1通常用来触发haslayout。关于haslayout,请自行上网搜索这个关键词,你会找到数以万计的内容雷同的解释。
?
我对zoom:1这玩意的解释只有一点――如果IE6下样式有问题,zoom:1无疑是个很好的解决方案。能解决很大一部分IE6的bug。
?
额。。。总结下,最终的css代码加入hack后会写成这样。
?
?
.left{width:200px;float:left;background-color:#3ff;} .right{background-color:#3f3;margin-right:220px;_margin-left:217px;_zoom:1;}
?
这个方案还缺失一部分:外层清浮动。以后到复杂布局的时候在讲啦。
?
这个方法的优点:
HTML结构非常简单。不需要为了样式呈现增加多余的Dom结构。(以后会讲到另一种方法,需要增加一层dom的,但是可以规避这个方法本身的一个缺陷。其实就是原来LC的英文版My account中的结构。
?
这个方法的缺点:
这个方法有个很大的缺点,也可以说是缺陷:左右侧必须有至少3px的间距。如果左右两侧是没有间距的,IE6下就挂了。如果有背景色的话,更是无法做到IE6下左右两侧背景色无缝隙的衔接在一起。中间会有3px抹不掉的白色!!
?
针对这个缺陷的解决方案:
解决方案也有~而且就实际需求来说,很靠谱。如果左右两侧有背景色的话。。那么左右两侧的背景色几乎都是要求平铺下来的,不会允许左右侧下边不齐吧!这个时候,这种布局的背景色,只能做成可纵向平铺的背景图了。其实也就很巧妙的可以解决IE6下这个bug了。。
?
?