Question

可能重复：
How to make floating inner divs the same height as the highest div

我有可变数量的具有可变内容的DIV（内容通过api拉入）。它们都是float: left。您可以在此处找到示例：http://playgrounds.affiliate-howto.de/

如您所见，如果一个DIV中的描述比其他DIV短，则设计会被破坏。

我更喜欢用CSS解决这个问题，但找不到解决方案。如果没有，JS也没问题......

Answer 1

您可以将所有框设置为312px，即当前大小。

您可以使用CSS：

<style type="text/css">
.sh_item{
height:312px important;
}
</style>

或者您可以使用JavaScript（jQuery）方式：

<script type="text/javascript">
 $(document).ready(function(){
   $('.sh_item').css('height', '312px');
 });
</script>

同样只是一个小小的提示，当使用ID时，你不应该多次在文档中使用相同的ID，因为CSS将找不到元素（它只会找到第一个元素而其余的ID具有相同的ID）将被忽略）。

例如，您使用sh_id的每件商品。 ID是为元素提供唯一ID的属性，因此为所有元素提供相同的ID将无法正常使用CSS，也不是ID的重点。你可以sh_id1，sh_id2，sh_id3等。但这是你的选择。如果要为多个元素指定相同的样式，请使用class属性。

希望这会有所帮助：）

Answer 2

您可以使用'min-height'CSS属性以使DIV不小于特定大小（即高度）

Answer 3

我曾在我的网站上遇到同样的问题。这个解决方案对我有用（适用于许多浏览器，也不支持min-height样式，如IE6）：http://www.impressivewebs.com/equal-height-columns-with-javascript-full-version/

Answer 4

除了Shawn31313的答案之外，你应该为你的“sh_name”类提供一个特定的高度，如“25px”，并添加overflow：hidden以防止文本重叠。

您还可以使用PHP修剪文本，如果文本的长度超出预期，则添加“...”。