会员中心
用户名：    密码：    验证码：      免费注册会员

jquery手册   CSS2手册       请关注健康

CSSer > 客户端开发 > web标准与前台开发 > 如何实现左右两列一列自适应宽度？

来源：csser.com 作者：一回 发布时间：2007-03-04
雅虎收藏夹 百度收藏 Google书签 Yahoo书签 新浪ViVi 搜狐网摘 365Key网摘 天极网摘 diglog 和讯网摘 POCO网摘 YouNote网摘 博拉网 天下图摘 Del.icio.us digg reddit spurl BlinkList blogmarks
 

 

刚才csser网上面试北京一公司的时候对方出的一个题目，要求用css完成：

 

 

要求一个2列的布局，自动适应外部容器的宽度，左列固定100px宽，右列自适应。

 

 

我的解决方案一：定位法

 

 

我首先想到了这种方法，左列相对右列（右列作为左列的父层容器）绝对定位，右列padding-left:100px;这种方法的缺点也很明显，如果左列的高度超出容器高度就出现问题了，至于出现什么问题，读者可以自己测试。

 

 

我的解决方案二：漂浮法

 

 

左列漂浮，这种带来的缺点也很明显，右边的不会自动适应宽度了。

 

 

我的解决方案三：漂浮Margin法

 

 

这种方法基本满足了需要，代码如下：

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#left{
 float:left;
 width:100px;
 background:#e4e4e4;
}
#right{
 margin:0 0 10px 104px;
 background:#ccc;
}
</style>
</head>
<body>
<div id="parent">
 <div id="left">
  <p>asdasdasd</p>
  <p>asdasdasd</p>
  <p>asdasdasd</p>
  <p>asdasdasd</p>
  <p>asdasdasd</p>
 </div>
 <div id="right"> asdasd </div>
</div>
</body>
</html>

 


相关文章