Таблица как сетка изображений в CSS (но с изюминкой) - PullRequest
Новая
       53

Таблица как сетка изображений в CSS (но с изюминкой)

0 голосов
/ 22 января 2011

Я хочу создать табличную сетку изображений.Каждое уменьшенное изображение (размер и ориентация варьируются) предназначено для центрирования в своем собственном 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>

1 Ответ

1 голос
/ 22 января 2011

Вы можете добавить это к .inner-div CSS: 

*display:inline;
zoom:1;

Я думаю, что происходит, IE не распознает display:table-cell, поэтому вам нужно использовать хак (или какой-либо другой методсказать только IE использовать display:inline с zoom:1).

...