6

见下图：

在此处输入图像描述

我需要的是扩大 B 列以匹配第一列的高度，或者如果我有几列，它们总是保持相同的高度，调整到最大的列高。

我已经玩了一段时间没有任何成功<div class="clearfix"></div>和height: 100%。

我正在使用Twitter Bootstrap 2.3.2。

HTML：

 <div id="main" class="row-fluid">
        <div class="span6">
            <div>
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                ABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
                BBBBBBBBBBBBBBBBBBBBBBBBBB
            </div>
        </div>
        <div class="span6">
            <div>
                B
            </div>
        </div>
    </div>

CSS：

@import url("http://twitter.github.com/bootstrap/assets/css/bootstrap.css");

        #main {
            height: 5em;
        }
        .span6 {
            background-color: lightgray;
            border: 1px solid red;
        }

        .span6 > div {
            background-color: lightblue;
            border: 1px solid green;
        }

由于某种原因，小提琴与上面代码的图像不相似，但是如果将其粘贴到 atest.html中，它可以正常工作。

编辑：

以及如何对齐内部span divs 的高度？

编辑2：

在@Coop 的指导下，我终于设法解决了这个问题。我来到以下代码：

var content_height = [];

jQuery('.row-fluid > div')
    .each(function () {
        content_height.push(jQuery(this).css({minHeight: 0}).height());
    })
    .each(function () {
        jQuery(this).css({

        minHeight: Math.max.apply(Math, content_height)
        });
    });
4

2 回答 2

3

看到这个小提琴你可以通过添加大负边距的大填充来做到这一点，然后用overflow: hidden;

CSS

.sameheight {
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:green;
}
.wrap {
    overflow: hidden;
}
于 2013-09-02T13:56:54.417 回答
3

要使用 jQuery 解决方案做到这一点：

首先将类添加eHeight到要赋予相同高度的一行中的所有 div 中。然后在下面添加jQuery：

$('.eHeight').each(function () {
  var eHeight = $(this).parent().innerHeight();
  $(this).outerHeight(eHeight);
});

在这里看小提琴：http: //jsfiddle.net/VA6D4/

请注意，jQuery 需要在 a 中，$(window).load因为 Google Chrome 在加载之前为图像提供了 0 高度和宽度。

于 2013-09-02T14:03:17.283 回答