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

【问题标题】：Placing a border with top/bottom padding between 2 floated divs of variable height在 2 个可变高度的浮动 div 之间放置一个带有顶部/底部填充的边框
【发布时间】：2012-05-15 16:44:35
【问题描述】：

我有一些标记：

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

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

我只是使用一些标准的 CSS 技巧来让两个内部 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 技巧。

我想要分割两个内部 div 的线，但线的底部和包含的 div 之间应该有一些空间：

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

【问题讨论】：

为什么要让 div 具有相同的高度？
div 应该具有相同的高度，以便我可以使用border 在 div 之间画一条线，该线将跨越整个容器。

标签： html css height css-float

【解决方案1】：

试试这个，我想它可以做你想做的：

.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;
}

【讨论】：

尝试将任一 div 的宽度减小 1%
现在的问题是两列的高度不再相同。由于内容是动态的，因此无法知道哪一列会更高或更短。
但他们都会画线，所以我想如果他们的高度不同也没关系。
好主意！虽然，我更喜欢不那么“hacky”的东西:)

【解决方案2】：

看看有没有帮助

用当前的 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;

}

【讨论】：

这似乎不起作用。因为内部 div 不再是相同的高度。
我已在 Fiddle 上添加了您的代码，并且它有效。您能否提供当前代码。然后我们可以看到，在你的 CSS 中你没有定义高度。
.container{ 溢出：隐藏；填充：20px；边框：1px 纯蓝色； } .one{ 右边框：1px 纯红色；向左飘浮;高度：10px；宽度：65%；底部填充：40px；边距底部：-500px； } .two{ 浮动：对；高度：40px；宽度：35%；底部填充：500px；边距底部：-500px； } 试试这个
我没有做任何更改：当前代码仍然按照问题：jsfiddle.net/FnWG8
我无法为 2 个内部 div 设置高度，因为它们需要根据其中的内容进行扩展。

【解决方案3】：

试试这个 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;
}

【讨论】：

不幸的是，我无法为 2 个内部容器定义高度，它们需要根据其中的内容进行扩展。否则，我不会有这个问题;)
使用最小高度代替高度
使用min-height，问题依然存在：边框仍然会碰到父容器的底部。

【解决方案4】：

如下更改标记为“.one”的 CSS 规则（注释掉 padding/margin 设置）

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

【讨论】：

这会导致 2 个内部 div 的高度不同。如果.two 比.one 长，则边框不会超出.one 的高度。不幸的是，由于内容是动态生成的，因此无法判断哪一列会更长。