问题标签 [equal-heights]

我遇到了一个等高脚本的问题，它使我的 4 个连续 div 的高度相等。在一个 div 中，我有 neosmart-stream，它将我最新的 facebook 帖子加载到 div 中。其他 div 的高度应该与那个相匹配，问题是 div 高度与首先加载的最高 div 相匹配，即其中包含目录图片的那个。

我希望能够在我的 facebook 帖子加载后运行等高脚本。这是该网站的链接：http: //www.guitarworldcityarcade.com.au/ 它适用于旋转横幅下方的 4 个深灰色框。

对不起，我没有提供代码的大错误。这是相等高度的代码：

这是 Facebook 帖子的代码：

这只是部分脚本，facebook 帖子是一个插件。四个 div 具有 .module 类

一个有window.load(function())，另一个有window.onload=function()，这些会有冲突吗？有没有办法可以设置一个在另一个之后加载这么多毫秒？

我一直在使用 jQuery 的这个位（jQuery 等高响应 div 行）来获得相等的高度，它工作得很好，但是如果使用相同的模式，BS2 和 BS3，它不会扫描行以使高度相等，它扫描页面本身，然后同一页面上的所有模式（行>列--）获取页面上最高的高度。这不是期望的实现。

http://jsbin.com/aVavuLeW/14/

上面的 JSBin 有一个使用 BS3 列的示例（它的副本）。您不能在堆叠点的列上具有相对位置，因此已复制这些以用于此 Bin。如您所见，如果您在每一行（在此示例中为 .foo 和 .foo2）创建不同的类，然后列的行为，但如果您决定使用相同的模式，则页面上最高的高度将接管。

问题：如何解决使用相同模式时基于页面而不是行计算的问题？

谢谢！！！

我有一个通过调用运行的等高脚本

标记是

这可能有无限数量的网格行，并且对于每个新的网格行，cms 都会增加附加到行类的数字。

我不想继续添加 $(".rowX").equalCols(); 调用我的 doc.ready 函数 - 我一直试图找到一个以 row 开头的类，并在等高调用中循环遍历它们 - 类似于 $(".row[x]").equalCols(); 但是变得非常困惑，解决这个问题的任何帮助都会很棒！提前感谢詹姆斯

我有 3 列延伸到相等的高度。问题是它们似乎只能在 Google Chrome 上运行，至少不能在 Safari 或 FF 上运行。它们也不适用于 iPad 版 Chrome 或 Safari。

在这里看到他们的行动

有趣的是，在这个Fiddle 示例中，我准备了完全相同的代码（仅更改了边框以获得更好的可视化效果），它们似乎适用于每个浏览器。

有没有办法解决这个问题？非常感谢！

HTML

CSS

我有 3 列延伸到相等的高度。唯一的问题是我需要每列之间有一个间隙。

小提琴演示

我试图在 #wrapper > .col 中放置一个 float:left （见下文），它起作用了，但随后它弄乱了列的高度。

有没有办法解决这个问题？

CSS

我有 3 列延伸到相等的高度。现在唯一的问题是，如果我只有 2 列，它们会扩展它们的宽度并占据主容器的 100%。所以基本上我需要它们具有相同的宽度，无论是 1、2 还是 3 列。关于如何实现这一目标的任何想法？非常感谢！

小提琴演示

我正在使用下面的函数在网格行上设置等高列。在初始页面加载时，该函数将高度设置为 '0' on div.gallery-item。刷新时，函数会正确启动并分配函数中设置的高度。

这是脚本：

我知道这与我加载函数的方式有关。我从中获取此脚本的文章的建议是使用window.onload如果图像是在列上设置不同高度的原因，但我尝试将其添加到脚本的最后一部分，如下所示，并且该函数没有完全触发。

有什么建议吗？

I'm trying to implement something based upon:

http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

In a nutshell, here is my test case:

http://jsfiddle.net/7CGCW/

Why are not both .panel's displayed with a green background?

All is well when my column sits atop a background-color'ed BODY (the second .panel), but when it sits atop a background-color'ed block (the first .panel, on top of .content), then the background of this DIV appears to sit atop my column, even when it is seemingly given an z-index that is lower in the stacking order.

The HTML:

The CSS:

我有一个水平布局，我正在使用display: table-cell它来获得统一的高度。这在 Chrome 中看起来不错，但我无法让 IE 以类似方式呈现。

http://jsfiddle.net/z8hys/4/

这就是我打算让它看起来的样子： .

但在 IE9、IE10 和 IE11 中，我得到如下所示的内容：

• 高度.cell需要是动态的。
• 至少需要在 IE 中工作。
• 垂直虚线.top, 具有可变高度。
• 水平虚线.right, 具有可变位置。

我们几乎完成了基于 Bootstrap 3 的网站的开发，但是在我们需要显示由缩略图和文本组成的列时，它们并不总是正确地换行和对齐。它可以在 Chrome 和 Safari 上运行，但不能 100% 地在 Firefox 上运行，而且我们几乎已经没有什么想法了。

我们正在使用来自 CSS Tricks ( http://css-tricks.com/equal-height-blocks-in-rows/ ) 的脚本将行设置为相等的高度。

描述正在发生的事情的最好方法是让你自己看看。这个页面上有一个很好的例子

将视图设置为显示所有产品并将显示设置为画廊视图。

在页面加载时，脚本（“columnConform”）应将 id 为“page-wrap”的列的高度设置为每行中最高的高度。它并不总是 100% 做到这一点。

如果您调整窗口大小，脚本将再次被触发，并且这次通常效果更好，尽管在 Firefox 中不是 100%。

设置相等高度的脚本代码如下（在我们的网站上的文件 thumbnail-row-fix.js 中）：

假设 window.onload 或 $(window).load 是相同的，并且在 DOM 和所有图像加载时触发。如果是这样，我无法解释为什么当页面加载到在 Firefox 中调整窗口大小时脚本的工作方式不同。

也许这是最新版本的 Firefox 中的一个错误，但我在论坛上看不到任何相关内容。

任何想法、提示和尝试使这项工作正常工作的方法将不胜感激。我希望我对此进行了充分解释，显示页面应该会引发问题。