第 三天 二列和三列布局 今天学习《十天学会web 标准(div+css)》的二列和三列布局,将涉及到以下内容和知识点 二列自适应宽度 二列固定宽度 二列固定宽度居中 xhtml 的块级元素(div)和内联元素(span) float 属性 三列自适应宽度 三列固定宽度 三列固定宽度居中 IE6 的3 像素bug 一 、两列自适应宽度 下面以常见的左列固定右列自适应为例,因为div 为块状元素,默认情况下占据一行的空间,要想让下面的div 跑到右侧,就需要做助css 的浮动来实现。首先创建 html 代码如下:
此处显示 id "side" 的内容
此处显示 id "main" 的内容
按照如图所示的创建方法,把两个 div 都创建出来,或手工写出代码。div 创建完成后,开始创建 css 样式表,代码如下: #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } 先创建#s ide 的样式,为了便于查看,设置了背景色。注意,s ide 的浮动设置为向左浮动; 然后创建#main 样式,注意这里设置#main 的左边距为120px。预览结果如下: 当我们拖动浏览器窗口变大变小时,#main 的宽度也会跟着改变。这里设置margin-left:120px ;正好让出#side 占去的120px 宽度,如果这里设置为 122px 的话,中间将出现 2px 的空隙,大家可以试一下。
此处显示 id "side" 的内容
此处显示 id "main" 的内容
提示:可以先修改部分代码后再运行 二 、两列固定宽度 有了前面的基础,两列固定宽度就容易多了,只需要把#main 的宽度由百分比改为固定值,如下图: 三 、两...