html - 在 2 个可变高度的浮动 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: 500pxandmargin-bottom: -500px技巧。

我想要分割两个内部 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;*/
}