在上一节课:Div+css 基础系列教程第 2 课-列布局中我们主要讲的是单列多块布局,今天主要来说说多列布局:
1、两列自适应宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; } </style> </head> <body> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </body> </html>
当我们拖动浏览器窗口变大变小时,#main 的宽度也会跟着改变。#main 中设置 margin-left:120px;正好让出#side 占去的 120px 宽度,如果这里设置为 122px 的话,中间将出现 2px 的空隙,大家可以试一下。
2、两列固定宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html>
两列固定宽度居中,需要在两列固定宽度的基础上改进,在学一列固定宽度居中时,我们知道让它居中的方法,所以这里需要在这两个 div 之外再加一个父 div:#content;#side 的宽度为 120px,#main 宽度为 350px,那么#content 的宽度应该为这两者之和,然后设置#content 居中,那么整体就居中了:
3、xhtml 的块级元素(div)和内联元素(span)
块级元素:就是一个方块,像段落一样,默认占据一行出现;内联元素:又叫行内元素,顾名思义,只能放在行内,就像一个单词,不会造成前后换行,起辅助作用。
如果没有 css 的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了 css 以后,我们可以改变这种 html 的默认布局模式,把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说,可以用 css 的display:inline将块级元素改变为内联元素,也可以用display:block将内联元素改变为块元素。常见的块级元素和内联元素如下:
4、三列自适应宽度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin:0;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } #main { background: #99FFFF; height: 300px; margin:0 120px; } </style> </head> <body> <div id="side">此处显示 id "side" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </body> </html>
5、三列固定宽度
三列固定宽度可以在三列自适应基础上添加一个父 div,并设置这个 div 的宽度即可,如下,添加一个 id 为 content 的父容器。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> body { margin:0;} #content { width:470px; margin:0 auto;} #side { background: #99FF99; height: 300px; width: 120px; float: left; } #side1 { background: #99FF99; height: 300px; width: 120px; float: right; } #main { background: #99FFFF; height: 300px; margin:0 120px; } </style> </head> <body> <div id="content"> <div id="side">此处显示 id "side" 的内容</div> <div id="side1">此处显示 id "side1" 的内容</div> <div id="main">此处显示 id "main" 的内容</div> </div> </body> </html>
思路就是这么个思路,大家举一反三,可以复制上述代码自行测试。