当前位置: 代码迷 >> Web前端 >> 某人专用课程(第5天)―― 两列布局(1)
  详细解决方案

某人专用课程(第5天)―― 两列布局(1)

热度:90   发布时间:2012-09-05 15:19:34.0
某人专用教程(第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了。。

?

?

  相关解决方案