jquery - 有两个高度相同的并排 DIV，当内容的长度不断变化时，如何保持它们的内容对齐？

Question

我有两个高度相同的并排 DIV，当它们的内容长度发生变化时，如何使它们的内容也彼此对齐？

这在 CSS 或 JQuery 中可能吗？

我每个 DIV 有四行，内容如下- 标题- 日期和时间- 地址- 空白行按钮

有时标题会有 3 行，所以整个 DIV 的高度必须调整，但我需要让它与另一个 DIV 对齐。

你能帮忙吗？

Answer 1

我明白你的意思了，

给2个div一个外部div

并将2个div的高度设置为自动

将使您的div具有相同的高度，并且里面的内容也很适合，

同时将 outerdiv 高度设置为 auto 以使其位于内容周围。

我还使用 flexbox 将 div 设置为彼此相邻，并使用断字来确保内容会中断，而不仅仅是 float 在 div 之外

.outer{height:auto;width:auto; background:green;display:flex;flex-direction:row;}
.inner{width: 50%; /*just add your width here*/ height:auto;border:5px solid blue;word-break: break-all;}

<div class="outer">
   <div class="inner"></div>
   <div class="inner"><h1>
   vgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjnvgbhjgvfcgyhbjn
   </h1></div>
</div>

如果只有 1 条足够长(所以另一条通常不会)，则让内容行具有相同的高度将更加困难，

要完成这项工作，您可能需要添加一些 jquery 来检查内容的高度，例如，如果它超过 50px，那么另一个应该成为相同的值