两列左列浮动，右列自适应宽度的四种方法

最新推荐文章于 2022-08-15 14:15:48 发布

xiaozhen0610

最新推荐文章于 2022-08-15 14:15:48 发布

阅读量284

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hj1hhihk1jaa.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

第一种方法，网上流传比较广的方法。采用左列 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>

xiaozhen0610

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
两列左列浮动，右列自适应宽度的四种方法

第一种方法，网上流传比较广的方法。采用左列 left 浮动，右列不浮动，采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外，当浏览器框缩小到一定程度时，右侧会掉下来。<!DOCTYPE html><html><head><title>方法一</title><style type="text/css">#left{width:100px;height:100px;background
复制链接

扫一扫