多栏等高的实现

再说多栏等高问题背景变border

记得之前发过一篇文章是关于多栏等高的实现：改一下名字吧， 两列高度未知，高度自适应 ！ 今天继续在说这个问题 首先，先扯点废话，网上这种东西很多很多，解决的办法也很多，但是我比较忠实于这个负边距内补丁的办法！你可以选择你适用的办法！ 先来总结下

 记得之前发过一篇文章是关于多栏等高的实现：改一下名字吧，两列高度未知，高度自适应！

今天继续在说这个问题……

首先，先扯点废话，网上这种东西很多很多，解决的办法也很多，但是我比较忠实于这个负边距内补丁的办法！你可以选择你适用的办法！

先来总结下（实现的关键点）：

(1)最外面的盒子，需要overflow:hidden;不设置你懂的，在此不多说……！

(2)里面两个盒子，左右，都需要设置 margin-bottom:-9999px; padding-bottom:9999px;

ok！完了！

先上个图

如果我没猜错的话，你实现的是不是这样的呢？看看代码我随便也把自适应宽度也做了哈……

html代码：

<div id="box">

    <div class="left">

        <br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd

    </div>

    <div class="right">

        <br />adsfasd

    </div>

</div>

css代码：

<style>

#box{ overflow:hidden; width:500px;}

.left{ width:200px; margin-bottom:-9999px; padding-bottom:9999px; float:left; background:#f60;}

.right{ margin-left:200px; margin-bottom:-9999px; padding-bottom:9999px; background:#60f;}

</style>

是这样的吧！！！！哈哈，但是现在我变了，我就要一个简单的变化，把.left .right里面的背景变成Border，

好吧，一步一步来，

.left{ width:200px; margin-bottom:-9999px; padding-bottom:9999px; float:left;border:1px solid #f60;}

.right{ margin-left:200px; margin-bottom:-9999px; padding-bottom:9999px; border:1px solid #60f;}

结果：

咦？？？底边跑哪里去了？？想必大家都猜出来了，估计是maring-bottom导致的！没错，

那怎么办呢？好多童鞋，都想到，我在left和right的盒子外面在套一个盒子,给其边框不行么？

理论上感觉挺好，但是实际出来是不行滴！有兴趣的童鞋可以试一下，我就不上图了！

那么怎么解决呢？

我选择了定位+overflow来实现

具体看代码：

html结果代码变了：

 

<div id="box">

    <div class="left">

        <br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd<br />adsfasd

    </div>

    <div class="right">

        <br />adsfasd

    </div>

</div>

<div style=" width:500px; height:1px; background:#666; overflow:hidden; position:relative; top:-1px;"></div>

多加了这么一个东西！css代码不变还是以前的：

 

<style>

#box{ overflow:hidden; width:500px;}

.left{ width:200px; margin-bottom:-9999px; padding-bottom:9999px; float:left; border:1px solid #666;}

.right{ margin-left:200px; margin-bottom:-9999px; padding-bottom:9999px; border:1px solid #999;}

</style>

最终结果就出来了：

好了，多了不变说了……具体还要童鞋亲自试验一下！