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>

Answer 1

您可以将其添加到.inner-div CSS：

*display:inline;
zoom:1;

我认为正在发生的事情是IE无法识别display:table-cell，所以你需要使用hack（或其他一些只告诉IE使用display:inline和zoom:1的方法）