0

我已经尝试了几天，使 N 个具有固定宽度和最小高度的盒子具有与最高盒子相同的高度，但是我发现的所有解决方案都不起作用，即使最近的尝试是设计和测试为与 Bootstrap 兼容。

当前的 HTML 标记：

<div id="modules">

    <div class="col-lg-3 col-md-3 col-sm-5 col-xs-12 module">

        <div class="panel panel-primary">

            <div class="panel-heading">Hello World</div>

            <div class="panel-body">

                It says "Hello World!"

                <hr />

                <div class="options pull-right">

                    <ul>

                        <li>

                            <span class="fa fa-remove"></span>

                            <a href="#">Remove</a>

                        </li>

                        <li>

                            <span class="fa fa-gear"></span>

                            <a href="/management/projects/modules/configure/project/1/module/1">Configure</a>

                        </li>

                    </ul>

                </div>

            </div>

        </div>

    </div>

</div>

每个.module都是一个不同的盒子。

在最新的 CSS 中重要的部分：

#modules {
  overflow: hidden;
}

.module {
  margin: 10px;
  margin-bottom: -99999px;
  padding: 0;
  padding-bottom: 99999px;
}

我修改了 CSS，尽管还有其他规则会影响 Bootstrap 类的默认定义，但我只是更改了背景和文本颜色，这没有任何意义。

但是渲染的输出......：

在此处输入图像描述

占位符文本它说“Hello World！” 是使框垂直增长的文本，只有少数框有大文本，所以它们为什么框必须具有相同的高度。

此外，如果存在#options（它因项目而异），则必须贴在每个框的底部，以免在它们之后有很大的空白空间。当（如果）这成为可能时，我可能会删除<hr />

是否有可能在没有 JavaScript 的情况下完成，最好但不限于？

4

1 回答 1

0

您可以通过使用 javascript 来实现这一点。找出你的积木的最大高度，并使它们都处于与最大积木相同的高度。

这是代码：

$( document ).ready(function() {
    var heights = $(".module").map(function() {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);

    $(".module").height(maxHeight);
});
于 2014-12-17T22:02:43.947 回答