0

テーブルのような画像グリッドを作成したい。各サムネイル画像 (サイズと向きは異なります) は、独自の DIV の中央に配置されます。各行には 4 つの画像が含まれている必要があります。その後、囲んでいる TD のサイズによって自動的に「改行」が発生するようにすると、結果は次のようになります。

XXXX
XXXX
XX

以下のコードは、Firefox、Opera、Safari、Chrome で意図したとおりに機能します。しかし、Internet Explorer 7/8/9 では、次の 2 つの問題が発生します。

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>
4

1 に答える 1

1

.inner-divこれをCSSに追加できます。

*display:inline;
zoom:1;

何が起こっているのか IE が を認識しないため、ハック (または IE のみに を使用するdisplay:table-cellように指示する他の方法) を使用する必要があると思います。display:inlinezoom:1

于 2011-01-22T19:33:21.640 に答える