纯CSS两列布局-优快云博客

代码

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>高度自适应,纯CSS方法-两列/3列</title>
6 <style type="text/css">
7 body{
8 margin:0 auto;
9 }
10 #box{ width:1000px; margin:0 auto}
11 #container{
12 background-color:#0ff; /*此背景色为右边的背景色*/
13 float:left;
14 width:700px;
15 border-left:300px solid #0f0; /*width + border = BoxWidth 为了网页内容自动居中*/
16 }
17 #left{
18 float:left;
19 width:300px; /*border-width*/
20 margin-left:-300px; /*border-width*/
21 position:relative; /*位置属性,依据父对象.以免产生2个子对象重叠现象For IE6*/
22 }
23 </style>
24 </head>
25 <body>
26 <div id="box">
27 <div id="container">
28 <div id="left">
29 此为2列自适应高..<br>
30 用border方式实现...<br>
31 如果要修改Left的宽度.一定要连Container里面的border-left.也一起修改<br>
32
33 </div>
34 <div id="right">
35 right content
36 </div>
37 </div>
38 </div>
39
40 </body>
41 </html>

实现原理:同个BOX内容变化.- -！

转载于:https://www.cnblogs.com/eastday/archive/2010/05/27/1745537.html