均衡容器行上的div高度

Question

我尝试了很多东西（css＆amp; 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＆amp;上述的

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 Selector指示整行框的最小高度。

<强>截图：

---

状态更新：

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

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

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

然后，当所有框在 100％容量 或低于此值的值时显示动态数据时，一切仍然是高度均衡。

将布局管理更进一步，您可以对右侧上的框执行相同的操作，以便 Blog Box 底线与该行的其他底部。

Answer 4

桌子怎么样？似乎人们试图使用css规则使div表现得像表，但是如何添加适当的表来渲染块呢？

我知道，如果使用不正确，表格会很糟糕。 “正确”在这里意味着你不应该使用表来渲染那些不需要表格的东西......我从许多文章中得到了这些：表格不被弃用，只是要小心使用。 这里的事情是你没有太多的选择！ CSS太脆弱了，不能让它发生，Javascript在我看来就像是用来杀死苍蝇的锤子。

我建议你放一下桌子，看看它是怎么回事。当然，请告诉我们。

祝你好运！

Answer 5

jsonb

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;
}

Answer 6

＆＃13;

＆＃13;

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"));
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;