问题标签 [equal-heights]

我有一个名为 equal-heights.js 的脚本，它与 underscore.js 一起工作。它使用动画将 div 与最高 div 的大小相等（可选）。问题是，当我为页面充电时，什么也没有发生，只有当我调整浏览器大小时，它才会开始均衡 div。

html 上的初始化代码：

你可以在这里看到 equal-heights.js：http ://webdesign.igorlaszlo.com/templates/js/blogger-equal-heights-responsive.js

当页面加载时，我应该怎么做，动画开始自动均衡 div？

我正在使用以下 jQuery 插件 — https://github.com/dogzworld/equal-height-columns

不幸的是，似乎没有文档，并且作者的网站已离线

除了与我在这里的联系表格一起使用外，它对我来说很好用：- http://www.dev-cheweng.co.uk.gridhosted.co.uk/contact/

请注意，当表单提交时出现验证错误（例如，如果您遗漏了所需的表单字段），包含 div 的内容会扩展，但由于 div 具有固定的高度，所以里面的内容会被截断。

我试图修改我的脚本，以便在提交表单时“刷新”：

但这似乎不起作用。我delay在其中添加了 s 认为可能会解决它，因为我认为也许我需要等待验证消息首先正确显示，但没有运气

谁能看到我做错了什么？

我希望一些侧边栏块在整个长帖子中均匀分布。

为了实现这一点，我在侧边栏中使用 Flexbox 来处理块的均匀间距。这完美地工作。

代码笔：http ://codepen.io/jameswilson/pen/yyOLaz?editors=110

更新：找到了一个可行的解决方案，有关详细信息，请参阅下面的 Slawa Eremkin 的回答！

工作代码笔：http ://codepen.io/jameswilson/pen/xbVVLL?editors=110

当我使用标准的等高列程序和 Flexbox 设置等列高度时，它只适用于 Firefox，而不适用于 Chrome。

在 Chrome 中，我能想出的唯一解决方法是使用等高 javascript 后备来手动将侧边栏容器的高度设置为与主列匹配的固定像素高度。

关于在 Chrome 中进行这项工作，我是否缺少一些魔力？

注意：我没有更改 HTML 结构的奢侈，因此理想的解决方案是仅基于 Codepen 中提供的结构的 CSS。

HTML：

和 SCSS：

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

当前的 HTML 标记：

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

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

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

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

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

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

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

有很多 CSS 的“等高列”、“圣杯”布局、巧妙的实现，display: table-cell当然还有一些很好的display: flex想法，尤其是在 SO 上。

但是我正在尝试实现我在其他任何地方都找不到的东西，而且如果不求助于 JS，我就无法实现，我宁愿避免。

我正在尝试创建一组等高的父容器，每个容器都有一组在卡片之间共享高度的子元素。每张卡片通过排水沟与其他相邻卡片隔开。显然我不能发布图片，因为我是新手，但视觉上更容易解释。所以这里有一个免费图片托管网站的链接：http: //postimg.org/image/ltcd8ns1l/

在图像中，您会看到三张卡片（1、2、3），每张卡片都有三个部分（1a、1b、1c、2a、2b、2c、3a、3b、3c）。卡片中的每个部分与其他卡片中的等效部分高度相同（即 1b = 2b = 3b、1c = 2c = 3c 等）。每个等效部分（例如 1b、2b 和 3b）的高度由这些部分中最高的部分（即最高的“b”）的高度决定。最高部分的高度由该部分内的内容量决定。

我已经能够使用一种display: table方法在视觉上实现这一点，包括用于卡片之间的排水沟的单独“表格单元”元素，但不幸的是，标记是无序且无语义的，如下所示：

...可怕。

所以我也能够得到一些与display: flex. 这是 CodePen 中的快速演示：http: //codepen.io/anon/pen/xbXWpQ

为了后代，这里是 HTML：

和 SCSS：

我更喜欢 HTML using flex，因为它的顺序正确并且不包含无意义的元素。

但这还远远不够：我希望能够将每张卡片包装在自己的元素中，例如。<article>...</article>. 部分原因是整张卡片可以是一个链接，但也因为在我看来这将提供更清晰、更适当的分隔标记。但flex不是那样工作的，所以很棘手。

我已经摆弄了很长时间，但我没有看到不使用 JS 或讨厌的 HTML 的方法。我宁愿避免这两种情况。

关于如何实现这一目标的任何想法？

我尝试使用 flex 并且这些项目仍然没有拉伸项目的最大高度。

JSFIDDLE 链接在这里

合理的表格行和表格单元格也没有显示相同的高度。

我正在尝试达到与此网站类似的效果： http ://planilandia.com/index(en).html

看看视频——它们占屏幕的 50%，而且它们之间没有边框、边距或填充。我试图实现这一目标，但没有成功。这是我的小提琴：

http://jsfiddle.net/uceder23/3/

我做错了什么？

这是代码：

和 CSS：

谢谢

我不确定 Flexbox 可以做到这一点，但它似乎越来越接近： http ://codepen.io/timkelty/pen/XbKzaQ

基本上我试图让.Nav-hdg元素具有相同的高度，并且垂直居中于列。我不想指定高度，但是，我希望高度是最高的高度.Nav-hdg。

任何人都知道如何解决这个问题，或者 flexbox 是否可以做到这一点？

这是我要实现的目标的粗略模型：

我一直在浏览互联网，尤其是 StackOverflow，以找到这个答案，但我一直没能找到。这里的好人帮助我解决了“一行的列高相等”——这对我的一些内容来说很棒。但是，显然，这是一个完全不同的游戏。

我有一个站点，基本的 CSS 布局，带有徽标和导航的顶部栏，下面的图像容器，然后是页脚。

在“内容区域”中，我设置了两个 div 类，oSection 和 eSection（奇偶，聪明，我知道）。我这样做是为了让每个 div 可以有一个交替的背景颜色，以便在视觉上轻松地分解内容包。但是，这些行的高度不同。它们似乎只扩展到 div 中包含的内容的高度。理想情况下，我希望这些 div 中的每一个都具有相同的高度，无论 div 中有多少内容（我想它必须与最大 div 一样高（相同高度）），但我也想做确保他们每个人都在自己的个人线上，所以我真正需要的是堆叠在彼此之上的等高 div

我曾尝试使用具有各种属性的 Flexbox，但它并没有像我预期的那样工作。

这是CSS（片段）

这是HTML（片段）

编辑根据要求，这里是显示错误大小的 Div 的屏幕截图。我希望每个带有文本的水平 div（不是页眉或页脚，只是中间 div）具有相同的高度，并像现在一样继续堆叠在一起。

例如，如果我有一个 2 列布局（主要内容和一个旁白），我可以将主要内容浮动到左侧，并将旁侧浮动到左/右，然后使用 flexbox 让旁白与主要内容相比具有相同的高度吗？

我是否必须将整个容器显示到 flexbox 以包括页眉、主要内容、旁边和页脚，或者我可以只挑选一个区域来使用 flexbox？