如何确保两个div具有相同的高度？ [英] How to make sure two divs have the same height?

问题描述

假设我在一个包装器中并排有2个div。

Let's say I have 2 divs within a wrapper side by side.

<div id="wrapper">
    <div id="primary"></div>
    <div id="secondary"></div>
</div>

#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}

我如何确保div secondary始终与div primary具有相同的高度

How can I make sure div secondary always has the same height as div primary

推荐答案

不幸的是，如果不使用Javascript，则没有完美的方法来执行此操作，因为实际上两个div彼此都不了解。

Unfortunately there is no perfect method to do this without using Javascript as realistically the two divs know nothing about one another.

您的选择取决于您希望在视觉上实现的目标。

What your options are depends on what exactly you were looking to achieve visually.

通过Google快速搜索看起来很有希望的内容： http://www.vanseodesign.com/css/equal -height-columns /

A quick google search brought this up which looks quite promising: http://www.vanseodesign.com/css/equal-height-columns/

如果您可以专注于更现代的浏览器，则可以使用flexbox摆脱困境。有关示例等信息，请参见此帖子： http://css-tricks.com/fluid -width-equal-height-columns /

If you can focus on more modern browsers you may be able to get away with using flexbox. See this post for examples etc: http://css-tricks.com/fluid-width-equal-height-columns/

这篇关于如何确保两个div具有相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！