从0开始学编程(9)--(129)-- 三列自适应宽度
这个,真好啊,我先还担心呢,要是这样,我那个有地图的页面就可以把地图部分放中间,做自适应好了:http://www.deman.cc/DIV+CSS/442.html
三列自适应宽度，一般常用的结构是左列和右列固定，中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下
<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>
增加以下css样式：
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
<div id="main">此处显示 id "main" 的内容</div>
从截图中明显看出，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了。
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5. <title>DIV自适应宽度</title>
6. <style type="text/css">
7. <!--
8. .L { width:100px; background-color:blue; float:left;}
9. .R { width:100px; background-color:blue; float:right;}
10. .M { background-color:red; }
11. -->
12. </style>
13. </head>
14. <body>
15. <div style="width:500px;">
16. <div class="L">left:100px</div>
17. <div class="R">right:100px</div>
18. <div class="M">自适应宽度</div>
19. </div>
20. </body>
21. </html>
2.div的默认（不写）宽度是100%，但不撑大父框架，写出width=100%是如果再使用了margin或padding就会将父框架撑大。 table默认宽度为内容的长度，与div不同，因此最好不要混着用，否者这个宽度自适应的方法在ie6下就有问题了。但高版本的浏览器都没问题，是不是说以后大家都会忽略这两者之间的差异呢？
如果父框架设定了固定宽度，那么子div的宽度设为width=100%，即使设定了margin,padding或border都不会撑大父框架。
http://chaoqunz.blog.163.com/blog/static/6154877720096308422202/