问题标签 [equal-heights]

我有一个像这样的简单布局：

当然，在 div 中有很多内容。但这是基本布局。第一个 div 的内容更多，因此高度更长。我如何让他们平等。我已经为此倾注了好几个小时，但我无法解决。我在许多线程中看到 .row-eq-height ，但我无法开始工作。flexbox 是 bootstrap 4 的一部分吗？我只在 3 上，因为 4 不适合我们。

我有 3 个带有 2 行的文本视图。我将它们LinearLayout以相同的重量水平放置。问题是当我将文本放入这个TextViews 时，如果文本占用 1 行或 2 行，它们的高度会有所不同。这种行为很奇怪。

无论文本长度如何，我都需要 3 个具有相同高度的文本视图。

my_layout.xml：

styles.xml：

我无法让我的 div 的高度匹配。我需要它们将 div 的高度与最多的内容相匹配——这通常很容易，但我正在使用还包含更多文本的叠加层来做到这一点。我不能用固定的高度或宽度来做，因为我需要布局来响应。单元格基本上需要是 col-md-2，文本换行时高度最高，它更像一个正方形，col-sm-6 会长而窄，col-xs-12 也会长而且狭窄。

它不必是引导程序，但它需要具有这种效果。另一个问题是我需要尽可能多地内联，因为我将它交付给客户以粘贴到他们的 drupal 站点，而没有太多访问后端的权限，所以请忽略我的总内联代码。

我几乎搞定了，叠加层起作用了，高度由内容决定，但我无法让高度与最长的高度相匹配。谁能看到我在这里做错了什么？

我需要创建一个布局，其中您有三列，在每一列中，相应的行需要具有相同的高度。对此的要求是。

1. 三列
2. 每列内有多行。
3. 每个对应的行必须具有相同的高度。
4. 在移动设备上，这些列将变成一个滑块。

我为此考虑了 2 个布局选项。

1. 定位每列中的每一行并使用 Javascript 设置高度

这种布局是理想的，因为我可以定位列并添加阴影样式，而不必定位每一行并应用到每一行。由于有三个容器列，因此在移动设备上实现滑块会更容易。但是，遍历每一列并获取相应的行并更新每一列的高度似乎需要做很多工作，尤其是因为每次调用 api 时都需要重新计算高度（上面的过滤器允许您更新数据）。

2. 使用弹性

这种方法很吸引人，因为我不需要使用 JS 来设置每一列中每个对应行的高度。但是，我需要为每一行设置单独的样式，比如阴影，这意味着我需要使用各种技巧，以免将阴影应用到每行的顶部和底部，这也是有风险的这将无法在不同的浏览器中正确显示（需要回到 IE 10）。此外，我能够激活的唯一滑块效果是溢出滚动，它不符合要求。

所以，我的问题是，还有其他我没有考虑的选择吗？你会怎么办？

有没有一种方法可以创建一个居中的owl-carousel位置，其中每个图像都具有相同的高度而不会丢失其纵横比？

我试图计算图像大小，JS/jQuery但随后计算owl-carousel变得混乱。与CSSs 的结果相同。示例（jsfiddle）：

当前div/image应该是

• 在旋转木马的中央，
• 与所有其他物品具有相同的高度
• 保持纵横比和
• 与上一个或下一个项目并排。

如果元素比视口更宽，那么它就会被切割。

甚至有没有一种方法可以实现这一点owl-carousel？

我检查了关于 SO 的其他一些类似问题，但据我所知，它们都有不同的重点：

• 图像滑块：保持所有图像的高度相同，同时保持滑块响应

  /li>

• Owl Carousel 在高度不相等时垂直对齐每个项目

  /li>

编辑：我只是仔细检查自动高度演示......

启用使用autoHeight: true. 目前仅适用于屏幕上的 1 个项目。该计划是计算所有可见项目并根据最高项目更改高度。

似乎还没有这样的选择。

朋友们，大家好）

在在线商店中，我使用 equalHeights 插件，但是在执行任何操作时，它不会更新项目的高度值。例如，切换商品的网格/列表视图时，高度保持与加载页面时相同。或者用商品切换简单的标签 - 效果相同。

https://github.com/mattbanks/jQuery.equalHeights/blob/master/jquery.equalheights.min.js

有人可以解决类似的问题吗？或者有什么好的想法吗？）

有没有办法严格执行整个段落或 div 的行高？

我正在使用 HTML+CSS 进行精确排版的书籍打印，并且我希望每一行都具有相同的高度，无论行内是什么。

常见的问题是上标或文本的放大部分，这些问题（或多或少成功地）在此处的其他几个问题中得到解决，关于 SO：

• HTML<sup />标签影响行高，如何使其保持一致？
• 如何在css中强烈强制行高，没有延伸？

但是，这些解决方案的问题在于它们是部分的并且仅修复特定情况。我不想修复特定的问题，我想确保这些问题根本没有机会出现。我不能事先确定整个文本中可能会出现哪些不同类型的元素，所以我想确保线条保持不变，相反，如果出现问题，请修复我需要线条增长的特殊情况，因为一些元素。

所以以前的“解决方案”中的问题，特别是：

1. <sup>标签解决方案需要手动播放多种尺寸，直到正确为止。
2. 第二个线程并没有真正解决问题。当文本的一部分变得足够大时，没有 和 的组合display:inline-block;会overflow:hidden;做vertical-align:top;——这条线最终会变长。

我试过的：

简而言之，请参阅此 JSFiddle。

我已经尝试应用这些 CSS 规则的所有组合：

• display: inline-block;（或只是inline）
• overflow: hidden;
• vertical-align: top;
• line-height: 1px;

但是，将文本大小更改为足够大仍然会导致行变大。添加图像（例如，可能仅比正常线条高度高 1 个像素的图形表情符号）将再次导致线条变大。

我想要的是：

1. 理想情况下，我想要一个解决方案来确保这些问题根本不会出现。我不介意修剪顶部/底部或两侧的大元素；
2. 如果 (1) 不可能，那么我至少需要一种方法来突出显示并清楚地看到发生这种情况的每一行。换句话说，如果任何一行只高出 1px，即使只是浏览文本，我也需要它来引起我的注意。

我想在一列内创建等高的项目。当我只有标题和价格时，这很容易。我可以灵活地增加标题，并且我的身高相同。

问题是当我也有描述时。
Title
Price
Desc

有两个例子，因为我都试过了。
一个示例将所有内容都包含在一个项目中，另一个示例将内容拆分为两个项目。

我有一个等高的 jQuery 脚本，但如果可能的话，我想使用 Flex。
所有元素都有颜色，以查看它们是否具有相同的高度。

我在codepen上有我的代码，但我也会把它粘贴在这里。

我有这个问题，我想在不固定身高的情况下解决。我正在使用 Bootstrap 4 作为按钮。

我的 HTML 结构如下：1 个 div 包含 2 个 div（Left和Right），Left包含一个短文本，Right包含 5 个按钮（或更多）在 flex 显示中。Right按列显示按钮（因为我想要它），但它不包装内容，它增加了Left和Right的高度以将所有按钮放在一列中。

我想要的是将全局高度固定在Left的高度，而Right应该通过将我的按钮放在 2 列中来适应这个高度。我唯一的解决方案是手动修复 div 的高度，这是可行的，但我确信有更好的方法可以做到这一点。

这是简化的代码 HTML 和 CSS，我也有 codepen（如果你想在最后看到我想要的，我评论了我的身高）：https ://codepen.io/julianlecalvez/pen/dwEoax