Вы указали, что создание макетов с таблицами датировано, я определенно согласен.Вот решение с использованием <div>
, которое должно работать во всех браузерах.
. Пример здесь: http://jsfiddle.net/pxfunc/hjgQm/
Я классифицировал фильмы в чередующемся порядке left-orientation
и right-orientation
div выглядит примерно так:
<div class="left-orientation">
<a href="#"><img src="http://placehold.it/250x175/ff0" alt="Director's Reel" /></a>
<p class="title">Director's Reel</p>
</div>
<div class="right-orientation">
<a href="#"><img src="http://placehold.it/250x175/f00" alt="Nobody's Off The Hook" /></a>
<p class="title">Nobody's Off The Hook</p>
</div>
и я использовал поля, чтобы контролировать, где фильмы показываются в родительском div
#films div {width:46%;margin-top:-100px;}
#films .left-orientation {text-align:right;}
#films .right-orientation {margin-left:54%}
, вы можете настроить #films div {margin-top:-100px;}
вверх или вниз, чтобы подогнать его под размержелаемая высота для смещения пленок