在两个可变高度的浮动div之间放置带有顶部/底部填充的边框

Question

我有一些标记：

<div class="container"> 
  <div class="one">column a<br />column a</div> 
  <div class="two">column b</div>
</div> 

2个内部div中的内容具有可变高度并且是动态生成的。

我只是使用一些标准的CSS技巧来让2个内部div具有相同的高度：

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 64%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}

.two{
    float: right;
    width: 34%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}

小提琴：http://jsfiddle.net/FnWG8/

问题：当我在2个div之间得到一条线时，线条一直延伸到底部，撞到容器。这是由于不知道2个内部div的最大高度，因此必须使用padding-bottom: 500px和margin-bottom: -500px技巧。

我希望划分2个内部div的行，但是行的底部和包含div之间应该有一些空格：

可以做些什么来实现这个目标？

Answer 1

看看是否有帮助

将此CSS替换为当前的

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    margin-bottom: 5px;
}

.two{
    float: right;
    width: 35%;
    margin-bottom: 5px;

}​

Answer 2

试试这个 CSS

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    min-height:10px;
    width: 65%;
    padding-bottom: 40px;
    margin-bottom: -500px;
}

.two{
    float: right; 
    min-height:40px;    
    width: 35%;
    padding-bottom: 500px;
    margin-bottom: -500px;
}​

Answer 3

试试这个，我认为它可以做你想做的事情：

.container{
    overflow: hidden;
    padding: 20px;
    border: 1px solid blue;
}

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    display: inline-block;
}

.two{
    border-left: 1px solid red;
    float: left;
    width: 35%;
    display: inline-block;
    margin-left: -1px;
}

Answer 4

更改标有“.one”的CSS规则，如下所示（注释掉填充/边距设置）

.one{
    border-right: 1px solid red;
    float: left;
    width: 65%;
    /*padding-bottom: 500px;
    margin-bottom: -500px;*/
}