某人专用教程（第5天）—— 两列布局（1）

今天开始说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了。。