0

На сайте имеется страница с превьюшками новостей. Все превьюшки выстраиваются в 2 колонки, имеют одну ширину, но разную высоту. Собственно разная высота мешает правильно расположить превьюшки в 2 колонки. Было бы легко, если бы колонки были фиксированной ширины, но ширина у них резиновая (50%). Подскажите пожалуйста как решить проблему - ссыль на фидл

1
  • Забыл добавить, что из-за не фиксированной ширины, автоматически появляется не фиксированная высота, т.к. когда превтюшка "тянется" текст постоянно добавляет / убирает строки, из-за чего собственно меняется высота. 17 янв 2013 в 4:43

4 ответа 4

0

Здесь описано решение Вашей проблемы.

Удачи


Учитесь пользоваться поисковиком...

2
  • там описано интересное решение, но я пошел самым простым путем, написал скрипт, который после каждого второго блока вставляет еще один, с clear: left; profit! 17 янв 2013 в 6:46
  • 1
    Да, это конечно вариант, но я думаю, что не стоит использовать JS там, где справится CSS.
    – Astor
    17 янв 2013 в 6:48
0

Возможно, Вам необходимо создать два класса: один c float:left, width:50%, второй с float:right, width:50%, а в них уже распологать Ваши контейнеры

1
  • С точки зрения серверного программирования это не подходит. 17 янв 2013 в 6:45
0

попробуйте после каждого второго эллемента ставить div style="clear:both" /div

0

Обычно как-то наоборот: "wrapper" - "обертка". Соответственно сперва item-wrapper, внутри которого item. Ну да ладно...

Вариант с display: inline-block не катит?

получим что-то такое:

#container { 
}
.item {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    *display: inline;
    zoom:1;
}    
.item-wrap {
    outline: solid 1px black;
    margin: 10px;
    padding: 5px;
}

В .item: inline и zoom - нужны только для IE7, поскольку последний не понимает inline-block. Как вариант можно вынести это в отдельный подключаемый css.

Дальше, есть тонкости. Если выполнить как есть, то колонки все равно не получатся. Дело в том, что inline-block заставляет элементы вести себя как строковые, то есть к ним применяется свойство white-space.

Решить проблему можно 4-мя способами.

  1. не использовать разрывов:

    <div class="item">...</div><div class="item">...</div>

вместо

<div class="item">...</div>
<div class="item">...</div>
  1. отрицательный маргин.

    .item { width: 50%; display: inline-block; vertical-align: top; *display: inline; zoom:1; margin: -1px; }

  2. Задать нулевой размер шрифта контейнеру

    container{font-size: 0;}

и восстановить его в

.item {font-size: 12px;}
  1. ну и последнее переопределить letter- и word-spacing у контейнера и восстановить его у item.

    container {

    letter-spacing: -.5em; 
    *letter-spacing: normal; 
    word-spacing: -.5em;
    

    }

    .item { width: 50%; display: inline-block; vertical-align: top; *display: inline; zoom:1; letter-spacing: normal; word-spacing: normal; }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.