请检查 JSfiddle ，您的问题已解决。

Question

我有四个div浮动。如果第一个div的内容更多，则四个div的边界不相同。但我希望根据四个div的冗长内容来增加边框高度。

如本示例所示，第一个div具有更多内容，因此四个div的边框底部高度不同。如何在div的不同内容中为四个div创建相同的高度。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <div>
        <div style="float: left; width: 24.5%; border: 1px solid;">
            <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>
        </div>
        <div style="float: left; width: 24.5%; border-top: 1px solid; border-bottom: 1px solid;">Box2</div>
        <div style="float: left; width: 24.5%; border: 1px solid;">Box3</div>
        <div style="float: left; width: 24.5%; border: 1px solid;">Box4</div>
        <br style="clear: left;" />
    </div>

</body>
</html>

Answer 1

有很多方法可以实现这一点。例如： 1.为包装器div添加类.container

.container {
display: table;
width: 100%;
border-collapse: collapse;
}

.container div {
display: table-cell;
width: 24.5%; border: 1px solid;
}

JsFiddle DEMO

您可以阅读此问题here

Answer 2

请检查 JSfiddle ，您的问题已解决。

您的HTML：

<div id="main-div">
    <div id="div1" style="float: left; width: 24.5%; border: 1px solid;"> <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>

    </div>
    <div id="div2" style="float: left; width: 24.5%; border-top: 1px solid; border-bottom: 1px solid;"><span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span><span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span><span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>  <span>This is a test span</span>

    </div>
    <div id="div3" style="float: left; width: 24.5%; border: 1px solid;">Box3</div>
    <div id="div4" style="float: left; width: 24.5%; border: 1px solid;">Box4</div>
    <br style="clear: left;" />
</div>

一些jQuery：

jQuery(document).ready(function($) {
    var div1 = $('#div1').height();
    var div2 = $('#div2').height();
    var div3 = $('#div3').height();
    var div4 = $('#div4').height();

    var largest = Math.max(div1, div2, div3, div4);
    $('#main-div div').height(largest + 'px');
});

Answer 3

您可以手动设置固定height到所有四个div，就像设置width一样。

如果您希望将第一个div的height继承到其他div，则必须使用JavaScript。
获取第一个div的height，然后将该值设置为div height的其余部分。

请不要使用内联样式，给他们一些id / class。因此，您可以更好地操纵它们。

浮动div具有相同的高度

3 个答案:

请检查 JSfiddle ，您的问题已解决。

您的HTML：

一些jQuery：