二列左列宽度固定，右列宽度自适应布局的四种方法

二列左列宽度固定，右列宽度自适应布局的四种方法
作者：Neoxone 发表时间： 2008年09月21号，星期天阅读：15,513 次

第一种方法，网上流传比较广的方法。采用左列left浮动，右列不浮动，采用margin-left定位的方式。此方法会有一个 ie6 3px bug .另外，当浏览器框缩小到一定程度时，右侧会掉下来。

<!DOCTYPE html>
<html>
<head>
<title>方法一</title>
<style type="text/css">
  #left
{width:100px;height:100px;background-color:#ccc;border:2px solid #333;float:left;}
 #right
 {height:300px;margin-left:104px; border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
}
</style>
</head>
<body>
   <div id="left"> left </div>
   <div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
</body>
</html>

第二种方法：采用左列向左浮动，右列绝对定位。为解决ie6下右列不撑开问题，在右列中设置一元素右浮动(不是个好方法)。

<!DOCTYPE html>
<html>
<head>
<title>方法二</title>
<style type="text/css">
  #sidebar
  {width:100px;height:100px;float:left;background-color:#cccccc;border:2px solid #333333;}
  #Wrap
  {position:absolute;left:113px;right:5px;height:300px;border:2px solid #333333;
   background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
  #floatSpan {float:right;} //for ie6
</style>
</head>
<body>
<div id="sidebar"> left </div>
<div id="Wrap"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br /> <span id="floatSpan"><span>
</div>
</body>
</html>

此中wrap的right:0;本是为撑开右列而设置。无奈ie6下无效。故设置了floatSpan。有此之后，去除float:right也无影响于效果。

方法三：左列使用绝对定位，右列使用margin-left定位。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
 .left{width:100px;height:100px;background-color:#ccc;border:2px solid #333; position:absolute;left:0; top:0; }
 .right{height:300px;margin-left:104px;border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;}
</style>
</head>
<body>
 <div style="position:relative;overflow:hidden;width:100%;"> <!-- 使用width是为了解决ie6下的bug -->
   <div class="left"> left </div>
   <div class="right"> right<br />right<br />right<br />right<br />right<br />right<br />right<br />right<br />right</div>
  </div>
</body>
</html>

纵观前面的几种方法，不是使用了margin-left定位，就是借助position的left定位，这两种定位方法，都需要事先知道left列的宽度，扩展性上不是很好。
那么，抛弃这两种定位方法，可不可以呢？也许你要说，CSS中定位的方法也就只有这两种，抛弃这两种定位方法，就没有其他定位方法了。难道不用定位也成？
没错。
我们可以借助ie下的haslayout让right列触发haslayout。而FF下则使用overflow:hidden(这个的原理不是很理解)。

<!DOCTYPE html>
<html>
<head>
<title>利用haslayout</title>
<style type="text/css">
  #left
  {float:left;width:100px;height:100px;background-color:#ccc;border:2px solid #333;
}
 #right
 {overflow:hidden;zoom:1; border:2px solid #333;background:#ccc url(http://www.baidu.com/img/baidu_logo.gif) no-repeat;
}
</style>
</head>
<body>
   <div id="left"> left </div>
   <div id="right"> 1111<br />1111<br />1111<br />1111<br />1111<br />1111<br />111<br />11</div>
</body>
</html>

标签： CSS2, 布局, 自适应

这篇文章发布于 2008年09月21号，星期天，11:49，归类于 CSS2, Javascript。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

CSSASSCSSASS

二列左列宽度固定，右列宽度自适应布局的四种方法
作者：Neoxone 发表时间： 2008年09月21号，星期天阅读：15,513 次

相关文章:

4 条评论发表在“二列左列宽度固定，右列宽度自适应布局的四种方法”上

留下回复

二列左列宽度固定，右列宽度自适应布局的四种方法作者：Neoxone 发表时间： 2008年09月21号，星期天 阅读：15,513 次

相关文章:

4 条评论 发表在“二列左列宽度固定，右列宽度自适应布局的四种方法”上

留下回复

二列左列宽度固定，右列宽度自适应布局的四种方法
作者：Neoxone 发表时间： 2008年09月21号，星期天阅读：15,513 次

4 条评论发表在“二列左列宽度固定，右列宽度自适应布局的四种方法”上