Question

我有一组div，它们在firefox的列表中并排排列，但它在chrome中没有正确对齐，因为在第二个列表中只出现了2个div，并且很难找出问题。

以下是该网站的链接，请注意 NSFW ：http://betterexcitingsexnetwork.com/

您可以看到，在第二行中只显示两个框而不是三个框，而在最后一行中只显示一行。

这是我使用的CSS：

.content_list {
clear: right;
vertical-align: middle;
display: inline-block;
}

media="screen"
.content_list {
position: relative;
width: 180px;
float: left;
margin: 0 25px 32px 0;
list-style: none;
border-radius: 5px;
}

Firefox中的一切都很完美，但它在Chrome中搞砸了。

任何帮助将不胜感激！

Answer 1

有趣的网站，你到那里:) 限制高度（高度：282px;）或使其变大。

Answer 2

问题在于，某些.content_list div比其他人更大/更高（例如，当'A Beginners Guide to Enjoyable'被包装成两行时）。

使所有.content_list具有相同的高度，例如

.content_list{
      height:270px;

      /*and perhaps to prevent content overflowing out of the div*/
      overflow:hidden;
 }

DIV对齐在Chrome中无法正常显示

2 个答案: