在两个可变高度的浮动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之间得到一条线时，该线一直延伸到底部，并击中了容器。 这是由于不知道两个内部div的最大高度，因此必须使用padding-bottom: 500px和margin-bottom: -500px技巧。

我想用线将2个内部div划分开，但是该行的底部和所包含的div之间应该有一些空间：

要做到这一点怎么办？

Answer 1

看看是否有帮助

将此CSS替换为当前的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;*/
}