Question

我正在为客户设计一个网站，我正在努力让两个并排的DIV调整到100％的容器。我已经完成了并排，但我无法让正确的DIV与左边的DIV相同。

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

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

Answer 1

有一篇关于A List Apart的文章解决类似的问题，你可以将它作为参考：Faux Columns。

Answer 2

你的问题是外部div正在通过内容自动调整大小，内容由内容自动调整大小。

您有几种选择：

使用@ R0MANARMY答案中提到的背景解决方案来创建两个同样高的列的视觉错觉。
将两个内部div的高度设置为相同的确切数字（使用px或em）
将外部div的高度设置为确切的数字。
使用display属性进行播放，并尝试使用表格单元格等不同的值。请记住，这个不适用于某些旧版浏览器。（不仅是IE，还有一些旧的Firefox和Chrome版本）
使用包含一行和两列的简单表格。

我意识到最后一个是最具争议的。然而，它可以解决您的问题，并且您没有理由不至少评估。

请[请呻吟]，没有人提到“语义HTML”这个词！我们的宇宙中没有这样的东西。）

Answer 3

如果是我。我会通过javascript解决这个问题。使用jquery你可以做...

$(document).ready(function()
{
if($('#leftColumn').height() > $('#rightColumn').height())
{
    $('#rightColumn').height($('#leftColumn').height());
}
else
{
    $('#leftColumn').height($('#rightColumn').height());
}
});

应该这样做。如果您喜欢与我合作的人，并且您不喜欢使用Javascript来解决CSS问题。然后你可能会运气不好。很多时候，使用JQuery要快得多，然后使用css使用“正确的方法”。您可能会花一整天时间尝试使用不同的样式组合。

Answer 4

左边的DIV中可能有多少个子弹点？

Answer 5

您是否尝试过：height: auto;或height: 100%;？

CSS：如何将两个DIV与自动高度并排放置到容器的高度？

5 个答案: