1

我已经尝试了很多东西（css & js）并且无法在以下站点上获得一些具有相同高度的框：

http://www.ancoris.com

我所说的方框从“ Ancoris Success Stories ”（橙色方框）和右边的 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 来做这件事——但就是做不到。

谢谢

4

6 回答 6

6

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

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

注意：display:table直到 IE8 及以上

于 2012-07-16T08:10:11.143 回答
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);
于 2012-07-16T08:17:06.773 回答
1

创建一个新的CSS 样式规则，以对该文件中第 15 行中的现有 CSS 选择器具有最小高度要求。

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

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

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

截屏：

在此处输入图像描述


状态更新：

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

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

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

然后，当所有框都以100% 的容量或小于此容量的值显示动态数据时，所有内容的高度仍将相等。

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

于 2012-07-16T08:33:27.163 回答
0

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

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

我建议你试一试桌子，看看效果如何。当然，让我们知道。

祝你好运！

于 2012-07-16T08:49:40.647 回答
0 

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>

于 2016-03-23T09:57:18.250 回答
0 

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>

于 2016-03-23T10:01:02.860 回答