我们知道,DIV+CSS的布局模式是现在广泛采用的网页布局方法。默认的,新建DIV标签总是另起一行。这就产生了一个问题,即如何使两个DIV标签并列,这样的布局在实际工作中是比较基本和重要的。假如我们将id分别为side和content的两个DIV块左右排列。
在CSS文件中,假如左边div的css这样写:
- #side{
- float:left;
- height:380px;
- width:250px;
- }
那么右边div的css就可以对应写成这样:
- #content{
- height:380px;
- margin-left:250px;
- }
有以下几点是值得注意的:
1、float属性只需定义一处,否则处理不好中间会出现难看的裂口。
2、width和margin-left刚好是相同的数字,保证他们能无缝连接。定义了float属性后,可以把该DIV块理解成悬浮在整个页面之上,我们知道margin-left是指的块状结构外沿距离(其他块状结构)边框/外沿的一个属性。如:#content中的值为250,就是规定了它的外沿距离边框250px。#side的宽度刚好也是250px。这样的安排确实是一种妥当的解决方案。