如何使用HTML / CSS实现相等的高度div（并行定位）？ [英] How do I achieve equal height divs (positioned side by side) with HTML / CSS ?

问题描述

我有一个容器里面有两个div。一个在左边，一个在右边，并排。

例如，右边的div有很多内容，并且是double左div的高度，我如何让左div伸展到右div的相同高度？

有一些JavaScript（jQuery）代码来完成这个

您可以使用jQuery，但有更好的方法。

解决方案

这种问题出现了很多，一般有3个答案...

1。使用CSS

这是最好的方法，因为它是最语义纯的方法（不使用JS，它有自己的问题）。最好的方法是使用 display：table-cell 和相关的值。您也可以尝试使用虚假背景技术（您可以使用CSS3渐变）。

2。使用表

这看起来效果很好，但是牺牲了不需要的布局。你也会引起纯粹主义者的轰动。

3。使用jQuery / JavaScript

这有利于拥有最多的语义标记，除了JS禁用，你不会得到你想要的效果。

I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.

For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?

Is there some JavaScript (jQuery) code to accomplish this?

解决方案

You could use jQuery, but there are better ways to do this.

This sort of question comes up a lot and there are generally 3 answers...

1. Use CSS

This is the 'best' way to do it, as it is the most semantically pure approach (without resorting to JS, which has its own problems). The best way is to use the display: table-cell and related values. You could also try using the faux background technique (which you can do with CSS3 gradients).

2. Use Tables

This seems to work great, but at the expense of having an unsemantic layout. You'll also cause a stir with purists. I have all but avoided using tables, and you should too.

3. Use jQuery / JavaScript

This benefits in having the most semantic markup, except with JS disabled, you will not get the effect you desire.

这篇关于如何使用HTML / CSS实现相等的高度div（并行定位）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！