二列和三列布局讲述.docx
- 文档编号:9812493
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:10
- 大小:204.87KB
二列和三列布局讲述.docx
《二列和三列布局讲述.docx》由会员分享,可在线阅读,更多相关《二列和三列布局讲述.docx(10页珍藏版)》请在冰豆网上搜索。
二列和三列布局讲述
▪二列自适应宽度
▪二列固定宽度
▪二列固定宽度居中
▪xhtml的块级元素(div)和内联元素(span)
▪float属性
▪三列自适应宽度
▪三列固定宽度
▪三列固定宽度居中
▪IE6的3像素bug
一、两列自适应宽度
下面以常见的左列固定右列自适应为例,因为div为块状元素,默认情况下占据一行的空间,要想让下面的div跑到右侧,就需要做助css的浮动来实现。
首先创建html代码如下:
按照如图所示的创建方法,把两个div都创建出来,或手工写出代码。
div创建完成后,开始创建css样式表,代码如下:
#side{background:
#99FF99;height:
300px;width:
120px;float:
left;}
#main{background:
#99FFFF;height:
300px;width:
70%;margin-left:
120px;}
先创建#side的样式,为了便于查看,设置了背景色。
注意,side的浮动设置为向左浮动;
然后创建#main样式,注意这里设置#main的左边距为120px。
预览结果如下:
当我们拖动浏览器窗口变大变小时,#main的宽度也会跟着改变。
这里设置margin-left:
120px;正好让出#side占去的120px宽度,如果这里设置为122px的话,中间将出现2px的空隙,大家可以试一下。
提示:
可以先修改部分代码后再运行
二、两列固定宽度
有了前面的基础,两列固定宽度就容易多了,只需要把#main的宽度由百分比改为固定值,如下图:
三、两列固定宽度居中
两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个div之外再加一个父div: