寂寞部屋
- 关注互联网,关注生活
关注互联网,关注生活
2019年五月
« 4月    
 12345
6789101112
13141516171819
20212223242526
2728293031  
  • 日志总数:553 篇
  • 浏览总量:2,433,073 次
  • 运行天数:612 天
  • 建站时间:2017-9-14
  • 最后更新:2019-4-2

六、div的分栏布局——两列固定及自适应列宽

上一节教程讲的是单列固定宽度及自适应宽度,这一节我们讲的是两列的固定宽度与其中一列自适应宽度,这也是最常用的布局结构。
一、两列固定宽度:
两列固定宽度自然要用到两个div.如下XHTML代码:

XML/HTML代码
  1. <div id=“left”>我的ID是left</div>
  2. <div id=“right”>我的ID是right</div>

下面我们来为它设定统一的大小及其它样式:

CSS代码
  1. #left,#right
  2. {width:240px,
  3. height:180px;
  4. background-color:#cecece;
  5. border:1px dashed #33ccff;
  6. }

以上的css代码用到我们第一节讲到的群组选择符#left,#right,使它们二者都具备后面的样式。
由于div里没有加入内容,为了能看出它的效果,在属性里加入了宽为1像素,颜色为#33ccff的实线框。以后的讲解我们仍将彩此方法来显示其它结构效果。
看下效果:

image

图中并没有达到我们的两列的效果,其实前面第三节也有提到,它将会按照block(块状结构)来显示在下一列。要真正的实现左右排列,就要加入新的属性——float(浮动属性)。
float浮动属性是div+css布局中的一个非常重要的属性。大部分的div布局都是通过float的控制来实现的。具体参数如下:
float:none用于设置是否浮动。left对象向左浮动。right对象向右浮动。

在此为了实现它们的分列显示,就要加入浮动属性改良为:

CSS代码
  1. #left,#right
  2. {width:240px,
  3. height:180px;
  4. background-color:#cecece;
  5. border:1px dashed #33ccff;
  6. }
  7. #left{float:left;}
  8. #right{float:left;}

加入了以上代码,就表示#left向左浮动。而#right也向左浮动,它就会紧贴着#left并列显示。也如上图所示。

根据上面的讲解,我们来逐步实现下面的效果:

1、如果按下面的浮动修改会变成什么?

CSS代码
  1. #left{float:left}
  2. #right{float:right}
  3. #left{float:right}
  4. #right{float:left}
  5. #left{float:right}
  6. #right{float:right}

image

看其中的三个小图,之所以把几个上下列显示的块对象变成了左右显示的分列效果,完全依赖于float的浮动属性。从页实现多种样式的组合方法。

二、两列自适应列宽
这个样式实现起来比较简单,之前在第五节教程中也提到要实现自适应列宽就是变固定的数值为百分比。与其唯一的区别在于加了浮动的属性。代码如下:

CSS代码
  1. #left,#right{
  2. float:left,
  3. height:200px;
  4. background-color:#f6f6f6;
  5. border:1px solid #ff9900;
  6. }
  7. #left{width:20%}
  8. #right{width:80%}

提示:把共同的样式及参数利用前面提到的群组选择符结合在一起节省了代码量。再把不同的单独列出来。
我们来看一下效果:

image

为什么没有实现向左浮动呢,问题是排在一行的宽度不能容下我们的20%+80%=100%的宽度,原因很简单:
我们设置的边框线为1px,这样,边框要占去4个像素。

还有我们的页面设置没有重新设,它会按默认的body对像与边界各有2个外边距,这样左右又占去了20个像素。如果不想要这个外边距,应当在css里加入以下代码:

CSS代码
  1. body{margin:0px}

这样就设定了外边距为0px.

而在实际应用中,我们一般为设置二者和小于100%的作法,即把right的宽度设为75%左右。然后我们看它的效果。如图对比。这样就实现了二列自适应。随浏览器宽度而改变。

原文地址:http://www.chaojibaby.com/blog/article.asp?id=111

本站原创文章,请勿复制转载
版权声明:除特别注明外,本站所有文章均为原创,未经许可请勿复制、转载
2007-11-14
5,035 views
标签: , ,
暂无评论

发表评论

注意: 评论者允许使用'@user空格'的方式将自己的评论通知另外评论者。例如, ABC是本文的评论者之一,则使用'@ABC '(不包括单引号)将会自动将您的评论发送给ABC。使用'@all ',将会将评论发送给之前所有其它评论者。请务必注意user必须和评论者名相匹配(大小写一致)。