我想创建一个类似于表格的图像网格 . 每个缩略图图像(大小和方向各不相同)都是以它自己的DIV为中心 . 每行应包含四个图像,之后我想要自动“换行”,由封闭的TD的大小引起,结果如下所示:
XXXX
XXXX
XX
以下代码适用于Firefox,Opera,Safari,Chrome . 但是在Internet Explorer 7/8/9中,我遇到了两个问题:
1)图像不是垂直居中的,它们位于DIV的顶部 .
2)"line break"没有发生 . 一排图像消失在右边的视线之外......
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>
1 回答
你可以将它添加到
.inner-div
CSS:我认为's happening is IE doesn'识别
display:table-cell
,所以你需要使用hack(或者其他一些只告诉IE使用display:inline
和zoom:1
的方法) .