Question

浮点div有问题。这是我的网站：http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6

我不知道为什么在某些行上有4张图像而在其他行上只有一张。

以下是负责它的代码：

#gallery-images {margin:0 0 50px 0; display: table}
div.image-item {
    float:left; display: table; text-align: center; position: relative;
    width:180px; height: 150px;
    margin:10px 0 30px 40px;
    vertical-align: middle; text-align: center;
}

div.image-item a {display: table-cell; vertical-align: middle;}
div.image-item img {margin:auto; border:1px solid #d3d4d4;}


#gallery-image {margin:0 0 30px 0 auto; text-align: center; display: block; width:970px; padding-bottom: 80px;}
div.photo-item  {margin: 0 auto; width:850px; display: block; text-align: center;}
div.photo-item a.img {margin:0 auto;  text-align: center; }

Answer 1

尝试display:inline-block;。

div.image-item { display: -moz-inline-block; display:inline-block; zoom:1; *display:inline; vertical-align:top; width:180px; margin:10px 0 30px 40px; vertical-align: middle; text-align: center; }

Answer 2

将div.image-item上的显示更改为inline-block，我会修改为将图像居中放在该div中。

Answer 3

当你离开这样的浮动元素时，只要它们不再适合一条线，下一个浮动元素只会在必要时下拉，直到它适合。

例如，第5张图像“卡在”第3张图像的底部，而不是一直向左移动，因为第4张图像没有那么高。

对于第10张图像，这不会发生，因为第9张图像高于其左边的所有其他图像，因此只要第10张图像落在第9张图像的边缘以下，就会清除整行

如果用填充替换边距并向.image-item添加边框，您会更清楚地看到我的意思。

要强制每行的第一项下降到下一行的开头，你应该不使用浮点数，在包含div中包装4行的每一行，或者使用CSS3的神奇力量清除浮点数每行的开头：

.image-item:nth-child(4n+1) { clear:left }

具有水平和垂直居中以及浮动div的CSS / XHTML问题

3 个答案: