05DIV-CSS学习.docxVIP

第5章、三列布局　我们有了一列布局再两列布局，我们今天再来了解一下三列布局。　·IE6的3像素bug　·三列固定宽度?　·三列固定宽度居中?　·三列自适应宽度?一、IE6的3像素bug　在我们学习三列布局之前，先来看一下IE6浏览器中的一个著名bug——IE6浏览器3像素bug（bug是什么？臭虫是也，是个不好的东东！）。当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列固定，右列液态的例子，css代码如下：　1、新建文件，保存为divcss-5-001.html。　2、在页上建立两个DIV并分别命名为side、main。div id=side此处显示 id side 的内容/divdiv id=main此处显示 id main 的内容/div　3、在页上建立两个DIV并分别命名为side、main。body { margin:0;}#side { float: left; background:#99FF99; height: 360px; width: 160px;}#main { background: #99FFFF; height: 360px;}　下面看看IE6和IE7中的显示效果：　　（IE6效果）　　（IE7效果）　4、解决之道　（1）新建文件，保存为divcss-5-002.html。　（2）从截图中明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。body { margin:0;}#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}#main { background: #99FFFF; height: 300px; }　看看，是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。二、三列固定宽度　1、新建文件，保存为divcss-5-003.html。　2、在页上建立三个DIV并分别命名为left、middle、right，然后再在这三个DIV外面加一个DIV并命名为content。div id=content　div id=left此处显示 id left 的内容/div　div id=middle此处显示 id middle 的内容/div　div id=right此处显示 id right 的内容/div?/div　3、开始创建css样式表，代码如下：(左宽度160px，中宽度200px，右宽度160px)body { margin:0;}#content { width:520px;}#left { background: #FF0000; height: 360px; width: 160px; float: left;_margin-right:-3px;}#middle { background: #00FF00; height: 360px;width: 200px; float: left;_margin-right:-3px;}#right { background: #0000FF; height: 360px; width: 160px;}　三、三列固定宽度居中　1、新建文件，保存为divcss-5-004.html。　2、三列固定宽度OK了，要想实现三列固定宽度居中就更方便了，只需设置#content {margin:0 auto;}即body { margin:0;}#content { width:520px;margin:0 auto;}#left { background: #FF0000; height: 360px; width: 160px; float: left;_margin-right:-3px;}#middle { background: #00FF00; height: 360px;width: 200px; float: left;_margin-right:-3px;}#right { background: #0000FF; height: 360px; width: 160px;}四、三列自适应宽度　1、新建文件，保存为divcss-5-005.html。　2、三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下。div id=left此处显示 id left 的内容/divdiv id=midd