html自动适应布局,html+css:一个自适应的两栏布局的实现

body{padding: 0; margin: 0; }

#left{width:100%; float:left; height:100%; }

#inner_left{background: pink; margin-right:100px;}

#right{margin:0px -100px 0 -100px; width:100px; float:left; height:100%; clear:right; background:yellow; opacity:0.5;}

how are youhow are you how are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are youhow are you

hello

个人觉得，主要的技巧在于#right的margin-right的设置。这种trick是在Eric Meyer的一本书看到的。width(#left)+width(#right)+margin-right(#right)<=width(body)的话，就能够把#left和#right放到同一行去，而且#left可以自适应宽度，其实也就是100%了，如果不是100%的话估计没办法计算(又是固定又是自适应的，反正我还不知道。auto?试了就知道了)。所以呢，在这道题中，width(#right)+margin-right(#right)=100px-100px=0,所以最终#left在保持100%大小的情况和#right同一行。

但是这样子呢，#left的右边100px就自然被#right遮住了，所以呢，没办法，我只能再加个#inner_left喽，然后margin-right:100px;喽。。。。

考试的时候真的想有个浏览器调试。。。

对了，别忘了#left和#right都是float: left;的。

ＯＶＥＲ。。。继续反省。。。