javascript - 如何使用 HTML/CSS 实现等高 div(并排放置)？

Question

我在容器中有两个 div。一个在左边，一个在右边，并排。我如何才能使每个高度相同，即使它们具有不同的内容。

比如右边div内容很多，而且是左边div的两倍高，如何让左边div拉伸(stretch)到和右边div一样高？

是否有一些 JavaScript (jQuery) 代码可以完成此操作？

Answer 1

您可以使用 jQuery，但有更好的方法来做到这一点。

这种问题经常出现，一般有3个答案...

1. Use CSS

这是做到这一点的“最佳”方法，因为它是语义上最纯粹的方法(无需求助于 JS，它有其自身的问题)。最好的方法是使用 display: table-cell 和相关值。您也可以尝试使用 the faux background technique (您可以使用 CSS3 渐变来实现)。

2. Use Tables

这似乎工作得很好，但代价是布局不符合语义。你也会引起纯粹主义者的轰动。我几乎避免使用表格，你也应该避免。

3. Use jQuery / JavaScript

这有利于拥有最语义化的标记，除非禁用 JS，否则您将无法获得想要的效果。