Блоки каталога одинаковой выосты

[gekas]

Стоит задача: сверстать модуль "Отели" таким образом, как показано на изображении. Требования к верстке:

1) все блоки имеют равную высоту (определяется по самому высокому блоку)

2) при ширине окна > 1260 должно отображатся 4 блока на одном уровне, при < 1260 - три.

Испробовал много различных подходов, и остановился-таки на таблицах.Но теперь возникла следующая проблема: таблица имеет специфику, что все ячейки адаптируются на ширину 100% и не получается выполнить перенос (например, задав 50% ширину каждому блоку) блоки адаптируются под ширину внешнего контейнера (display: table). Возможно ли исправить эту проблему в таблицах или следует использовать другой метод?

 

     <main id="mainO"><div>           <img src="images/img1.png">           <p>               <a href="#">Локейшн на Адмиралтейском</a>               <span>Санкт-Петербург</span>           </p>           </div>        <div>               <img src="images/img2.png">            <p>               <a href="#">Бест Вестерн Премьер МОНА Бутик</a>               <span>Шерементьево</span>            </p>            </div>         <div>            <img src="images/img3.png">           <p>               <a href="#">Приморье Spa</a>               <span>Геленджик</span>           </p>           </div>          <div>            <img src="images/img1.png">           <p>               <a href="#">Локейшн на Адмиралтейском</a>               <span>Санкт-Петербург</span>           </p>           </div>        </main>

#mainO {  display: table;  table-layout:fixed;  width: 100%;  border-spacing: 20px;   background: #ccc;}#mainO > div{   display: table-cell;    background: rgb(89, 89, 89);        width:50%;     word-break: break-all;}

Edited July 3, 2014 by gekas

[npofopr]

Делайте списком - li  с inline-block; или float: left;

А высоту с помощью скрипта - http://brm.io/jquery-match-height/

[novichok27]

Всем привет ! Может кто подскажет !? Как правильно задать параметры в ячейки под фотографии чтоб фото не размазало !? вот как получилось http://masterdom-sho...ekoshpon_verda/

[rus]

какие ячейки? что за параметры? что значит "размазало"?

дык нормально ж получилось то...

[novichok27]

  On 7/9/2014 at 6:11 AM, rus said:

какие ячейки? что за параметры? что значит "размазало"?

дык нормально ж получилось то...

Блоки, ячейки или как там их, я не знаю. Короче размеры выставлял по разному ! Вот так например:  

.photo_list li img, .items_catalog li img {

    height: 160px;

    margin: 0 0 5px;

    width: 120px;

Фото не в оригинале, растянуто ! 

А как тут в сообщении картинку добавить ?