Question

我潜水，我漂浮，以便他们并排显示。这是我的代码：

.serviceMembersPosition {
    width: 190px;
    float: left;
    display: inline;
    border: 1px solid #999;
    margin: 5px 5px 5px 0;
    padding: 5px;
}

然而，如果其中一个DIV的信息比其他信息更多，它会起作用。请参阅下面的屏幕截图中的差距。有没有办法克服这个问题？我在我的网站上使用JQuery。也许这有一些代码？

alt text http://img532.imageshack.us/img532/1032/screenshot20100331at110.png

Answer 1

为避免这种情况，您需要在每个“行”之后清除浮动。

<div style="clear: both;"></div>

在任何想要成为当前行最左边的DIV之前插入类似的DIV。

Answer 2

你看到的是正常行为..

一个简单的css技巧是clear:left每三个项目（因为你每行有3个盒子）

in css3

.serviceMembersPosition:nth-child(3n+1){clear:left;}

由于很少有浏览器支持css3，你可以使用jquery等价物

$('.serviceMembersPosition:nth-child(3n+1)').css('clear','left');

但IE仍无法正确呈现..

对于IE，您必须将div中的每一行换行并将overflow:auto设置为它，或者在每行之后使用具有clear:both

的css规则放置清除div / br

Answer 3

你的问题似乎是换行问题。与占用1行的描述相比，您的一些描述占用2行。尝试使用可以处理此问题的插件。

Setting Equal Heights with jQuery

浮动DIV元素没有排队

3 个答案: