css - CSS 中的类似表格的图像网格（但有一点扭曲）

Question

我想创建一个类似表格的图像网格。每个缩略图图像（大小和方向不同）都位于其自己的 DIV 的中心。每行应该包含四个图像，之后我希望发生自动“换行”，这是由封闭 TD 的大小引起的，结果如下所示：

XXXX
XXXX
XX

下面的代码在 Firefox、Opera、Safari、Chrome 中按预期工作。但在 Internet Explorer 7/8/9 中，我遇到了两个问题：

1）图像不是垂直居中的，它们位于 DIV 的顶部。
2）“换行”不会发生。一排图像消失在右侧的视线之外......

CSS：

.outer-div {display: inline; float:left; clear:right;}

.inner-div 
{
width: 220px;
height: 220px;
display: table-cell;
vertical-align: middle;
}

HTML：

<div class="outer-div"><div class="inner-div">img.jpg</div></div>

score 1 · Accepted Answer

您可以将其添加到.inner-divCSS 中：

*display:inline;
zoom:1;

我认为正在发生的事情是 IE 无法识别display:table-cell，因此您需要使用 hack （或其他一些告诉 IE 仅使用display:inlinewith 的方法zoom:1）。

1 回答 1