首页 文章

CSS中的表格式图像网格(但有一个扭曲)

提问于
浏览
0

我想创建一个类似于表格的图像网格 . 每个缩略图图像(大小和方向各不相同)都是以它自己的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 回答

  • 1

    你可以将它添加到 .inner-div CSS:

    *display:inline;
    zoom:1;
    

    我认为's happening is IE doesn'识别 display:table-cell ,所以你需要使用hack(或者其他一些只告诉IE使用 display:inlinezoom:1 的方法) .

相关问题