本文提供了一种不使用position: absolute属性的网页布局方法，通过浮动和margin调整实现左侧区域自适应、右侧固定宽度的效果，并展示了两种不同方向（左浮和右浮）的具体实现。
这是百度的一道笔试题，网上的答案相当统一的只有一个。但是我本人不是很喜欢使用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>
扫一扫
741
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
