CSS/XHTML 水平和垂直居中以及浮动 div 的问题
我遇到了浮动 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; }
I have a problem with floating divs. Here is my website: http://www.wokarts.com/index.php?option=com_gallery&controller=images&parent=6
I don't know why on some rows there are 4 images and on others only one.
Here is code responsible for it:
#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; }
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
尝试
display:inline-block;。Try
display:inline-block;.将
div.image-item上的显示更改为inline-block，我将进行修改以使图像在该 div 内居中。Change the display on
div.image-itemtoinline-blockand I would modify to have the image center within that div.当您像这样保留浮动元素时，一旦它们不再适合一行，下一个浮动元素将仅根据需要下降，直到它适合为止。
例如，第五张图像“卡在”第三张图像的底部，而不是一直移回到左边缘，因为第四张图像没有那么高。
对于第 10 个图像，这种情况不会发生，因为第 9 个图像高于其左侧的所有其他图像，因此一旦第 10 个图像下降到第 9 个图像的边缘以下，它就会清除整行。
如果您用填充替换边距并向
.image-item添加边框，您会更清楚地明白我的意思。要强制每行的第一个项目下降到下一行的开头，您应该不使用浮动，将每行 4 个项目包装在一个包含 div 中，或者使用 CSS3 的神奇力量清除开头的浮动每行：
When you left float elements like that, as soon as they no longer fit on one line, the next floating element will drop down only as far as is necessary until it does fit.
The 5th image, for example, "gets stuck" against the bottom of your 3rd image instead of moving all the way back to the left edge because the 4th image isn't as high.
For the 10th image this doesn't happen, because the 9th image is higher than all the other images left of it, so as soon as the 10th image has dropped below the edge of the 9th image, it clears the entire row.
You'll see what I mean more clearly if you replace the margin by padding and add a border to
.image-item.To force the first item of each row down to the start of the next line, you should either not use floats, wrap every row of 4 items in a containing div, or use the magical powers of CSS3 to clear the floats at the start of each row: