css:将 float div 的高度设置为其带边距高度的最大值

Question

我的问题是基于 css: set the height of floating divs as maximum of their heights - Is it possible to fix this jsFiddle with pure css so that all 3 divs that are in the same row have the same height, the maximum of their 3 heitghts?

解决方案是here - jsFiddle .

但是，我没有提到我需要在元素之间留出一些边距(因为不重要且易于添加)。因此，建议使用 display:table-cell 解决方案。不幸的是，Margin 属性不适用于 display:table-cell 元素。

是否仍然有可能通过 div 之间的一些空间使用纯 css 来解决我的问题？ 原始代码在这里，我希望所有三个 div 的高度相同，并且它们之间有一些空间，比方说 3px。

代码在这里:

<style>
#main{
    border:1px solid red;
    width:605px;
    overflow:hidden;
}
#zero{
    border:1px solid blue;
}
.small{
    border:1px solid green;
    float:left;
    width:199px;
}
</style>
<div id="main">
    <div id="zero">
        0
    </div>
    <div class="small">
        small text
    </div>
    <div class="small">
        large text large textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge textlarge text
    </div>
    <div class="small">
        another small text
    </div>
</div>

这是原始问题@ jsFiddle .

同样，如果可能的话，我更喜欢纯 css 解决方案。

Answer 1

您可以在 #main 上使用 border-spacing: 3px;。

JsFiddle