|
<p id="main"> <p id="left"><p>左列</p></p> <p id="right"><p>右列</p></p> </p> |
现在加CSS，要实现的效果是mian是可变的，right层宽度为200px，并且固定不变，要让left的宽度随main的变化而变化。CSS的写法是：
|
#main{width:100%;background:#CCCCCC;} #left{width:100%;margin-left:-200px;float:left;background:red;} #right{width:200px;float:right;background:green;} |
基本上达到所要的效果了，#left的宽度设置为100%，加个margin-left:-200px;让它向左移动200px，好让它腾出200px的空间塞进right层。但有一个问题，左列被移动的那200px隐藏了，看不到里面的东西，所以还必须增加一个DIV来辅助。
修改了一下，HTML代码，变成：
|
<p id="main"> <p id="left"> <p id="innerLeft"><p>左列</p></p> </p> <p id="right"><p>右列</p></p> </p> |
现在要让innerLeft把左边被隐藏的部分弄出来，所以得再加个margin-left:200px，修改后的CSS代码如下：
|
#main{width:500px;background:#CCCCCC;} #left{width:100%;margin-left:-200px;float:left;background:red;} #innerLeft{margin-left:200px;} #right{width:200px;float:right;background:green;} |
演示：
还有更简单的方法，至于为什么网上很少有人用，我也在论证：