CSS格局：两列，左边宽度自适应，右边宽度固定200px
日期：2014-05-17 浏览次数：20604 次
?? ? 这是百度的一道笔试题，网上的答案相当统一的只有一个。但是我本人不是很喜欢使用position：absolute这种属性，所以自己重新写了一个。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
?
<BODY>
<div>
<div id="left" style="float:right;width:100%; height:200px;">
??<div style="margin-right:200px;height:200px;background-color:red;"></div>
</div>
<div id="right" style="float:right;margin-right:-100%;width:200px;height:200px;background-color:green;"></div>
?
</div>
</BODY>
</HTML>
?
不过这个有一个问题，就是随着浏览器窗口红色区域变到0以后会发生错行。下面是相反的情况，即”右侧自适应，左边固定宽度200“
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
?
<BODY>
<div>
<div id="left" style="float:left;width:100%; height:200px;">
??<div style="margin-left:200px;height:200px;background-color:red;"></div>
</div>
<div id="right" style="float:left;margin-left:-100%;width:200px;height:200px;background-color:green;"></div>
</div>
</BODY>
</HTML>
