均衡容器行上的 div 高度

Question

我尝试了很多东西（css 和 js），但无法在以下网站上让某些框具有相同的高度：

http://www.ancoris.com

我所说的方框从“Ancoris 成功案例”（橙色方框）和右侧的 2 开始。

我正在谈论的区域如下（我没有包含所有代码，只包含我需要均衡的容器和 3 个 div）：

<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4">
   <div class="moduletable blueboxonly span4">
   <div class="moduletable orangebox h3 span4">
</div>

如果可能的话，我最好用 CSS 来做这件事——但就是做不到。

谢谢

Answer 1

为此，您可以使用 display:table 属性。像这样写：

#below-content{
 display:table;
}
.moduletable{
 display:table-cell;
}

注意：display:table 适用于 IE8 及以上版本

Answer 2

您可以将所有 div 高度设置为具有最大高度的 div 的高度。

var maxHeight = 0;

var divs = jQuery("#below-content .moduletable");

jQuery.each(divs, function(){
    var height = jQuery(this).height();
    if(maxHeight<height)
        maxHeight = height;

});
divs.height(maxHeight);

Answer 3

创建一个新的 CSS 样式规则，以便在 第 15 行的 file 中看到现有 CSS 选择器的最低高度要求。

根据当前使用的 CSS，中心框锁定在 height:256px，padding:9px 应用于此元素的顶部和底部。也就是说，总最小高度为274px (9 + 256 + 9)。

.row-fluid .span4{
  min-height: 274px;
}

上面的 CSS 选择器规定了整行盒子的最小高度。

截图：

---

状态更新：

由于橙色和蓝色框中的内容具有动态内容，因此您实际上可以为网页布局定义任何想要的min-height要求。之前的274px是基于当时的蓝框内容。

请注意，如果内容超过此设置的阈值，您将再次出现不均匀的框。

解决方案是找出所需的实际最小高度。这是通过查看每个橙色框和蓝色框来了解最大项目数以及实现所需最终垂直高度的最大项目高度来实现的。

然后，当 所有框 以 100% 容量 或小于此的值显示 动态数据 时，一切的高度仍然会均衡。

将 布局管理 更进一步，您可以对 右侧 的框执行相同的操作，因此 博客框 em> 底线与该行的其他底线。

Answer 4

桌子呢？似乎人们正在尝试使用 css 规则使 div 表现得像表格，但是添加一个适当的表格来呈现你的块呢？

我知道，如果使用不当，表格会很糟糕。 “正确”在这里意味着您不应该使用表格来渲染不需要渲染表格的东西......我从许多文章中得到了这一点：不推荐使用表格，只是要小心使用。 这里的问题是你真的没有太多选择！ CSS 太脆弱而无法实现，而 Javascript 在我看来就像一把锤子可以杀死苍蝇。

我建议您尝试使用表格，看看效果如何。当然也让我们知道。

祝你好运！

Answer 5

function equalHeight(group) {
    jQuery(group).css("height", "auto");

    eqheight = 0;
    group.each(function () {
        thisHeight = jQuery(this).height();
        if (thisHeight > eqheight) {
            eqheight = thisHeight;
        }
    });
    group.height(eqheight);
}
jQuery(document).ready(function () {
    equalHeight(jQuery(".moduletable"));
});
jQuery(window).resize(function () {
    equalHeight(jQuery(".moduletable"));
});

function equalHeight(group) {
    jQuery(group).css("height", "auto");

    eqheight = 0;
    group.each(function () {
        thisHeight = jQuery(this).height();
        if (thisHeight > eqheight) {
            eqheight = thisHeight;
        }
    });
    group.height(eqheight);
}
jQuery(document).ready(function () {
    equalHeight(jQuery(".moduletable"));
});
jQuery(window).resize(function () {
    equalHeight(jQuery(".moduletable"));
});

.blueboxonly{
  background-color: blue;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}

.orangebox{
  background-color: orange;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4"> 01 div</div>
   <div class="moduletable blueboxonly span4"> 02 div<br/>02 div</div>
   <div class="moduletable orangebox h3 span4"> 03 div<br/>03 div<br/>03 div</div>
</div>

Answer 6

function equalHeight(group) {
    jQuery(group).css("height", "auto");

    eqheight = 0;
    group.each(function () {
        thisHeight = jQuery(this).height();
        if (thisHeight > eqheight) {
            eqheight = thisHeight;
        }
    });
    group.height(eqheight);
}
jQuery(document).ready(function () {
    equalHeight(jQuery(".moduletable"));
});
jQuery(window).resize(function () {
    equalHeight(jQuery(".moduletable"));
});

.blueboxonly{
  background-color: blue;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}

.orangebox{
  background-color: orange;
  color: #fff;
  padding: 15px;
  float: left;
  margin-right: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="below-content" class="row-fluid">
   <div class="moduletable first orangebox h3 span4"> 01 div</div>
   <div class="moduletable blueboxonly span4"> 02 div<br/>02 div</div>
   <div class="moduletable orangebox h3 span4"> 03 div<br/>03 div<br/>03 div</div>
</div>