如何使用HTML / CSS实现相等高度的div(并排放置)?

我在容器中有两个div。一个在左边,一个在右边,并排放置。即使内容不同,我如何能够使每个人的身高相等。

例如,右div有很多内容,并且是左div高度的两倍,如何使左div延伸到右div的相同高度?

是否有一些JavaScript(jQuery)代码可以完成此任务?

回答:

可以 使用jQuery,但是有更好的方法可以做到这一点。

这类问题很多,通常有3个答案…

1.使用CSS

这是做到这一点的“最佳”方法,因为它是语义上最纯净的方法(无需求助于JS,这有其自身的问题)。最好的方法是使用display: table-cell和相关值。您也可以尝试使用人造背景技术(可以使用CSS3渐变来完成)。

2.使用表

这似乎工作得很好,但是要牺牲布局的语义。您还会引起纯粹主义者的骚动。我几乎避免使用表,您也应该避免使用表。

3.使用jQuery /JavaScript

这具有最大的语义标记优势,除非禁用JS,否则您将无法获得想要的效果。

以上是 如何使用HTML / CSS实现相等高度的div(并排放置)? 的全部内容, 来源链接: utcz.com/qa/415129.html

回到顶部