首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

CSS格局:两列,左边宽度自适应,右边宽度固定200px

2012-11-23 
CSS布局:两列,左边宽度自适应,右边宽度固定200px?? ? 这是百度的一道笔试题,网上的答案相当统一的只有一个

CSS布局:两列,左边宽度自适应,右边宽度固定200px

?? ? 这是百度的一道笔试题,网上的答案相当统一的只有一个。但是我本人不是很喜欢使用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>

热点排行