CSS:如何让两个 DIV 并排自动高度，达到容器的高度？

Question

我正在为一个客户设计一个网站，我试图让两个并排的 DIV 调整到 100% 的容器。我已经并排完成了，但我无法让右边的 DIV 与左边的高度相同。

您可以在此处查看问题:http://www.campusmomlaundry.com/

“挑战”和“好处”DIV 应并排且高度相同，无需手动指定高度。我该怎么做？

Answer 1

您的问题是外部 div 会根据内部内容自动调整大小，而内部内容会根据其内容自动调整大小。

你有几个选择:

• 使用@R0MANARMY 回答中提到的背景解决方案来创建两根同样高的柱子的视觉错觉。
• 将两个内部 div 的高度设置为完全相同的数字(使用 px 或 em)
• 将外部 div 的高度设置为一个精确的数字。
• 尝试使用 display 属性并尝试几个不同的值，例如 table-cell 等等。请记住，此浏览器不适用于某些较旧的浏览器。 (不仅是 IE，还有一些旧的 Firefox 和 Chrome 版本)
• 使用单行两列的简单表格。

我意识到最后一个是最有争议的。然而，它是您问题的可能解决方案，您没有理由不至少进行评估。

([呻吟]拜托，拜托，没有人提到“语义 HTML”这个词!我们的宇宙中没有这样的东西。)