Как осуществить выравнивание div по одной линии?

Question

[doktorpull]

Привет всем гуру. Прошу помочь разобраться с проблемой, не могу понять, почему у меня верстка блоков слетает. Как сделать, чтобы высота у всей линии блоков была одинаковой независимо от количества выводимого текста? Вот сам шаблон.

Answer 1

[Юрий Лобанов]

Ошибки сначала в вопросе исправьте.

Comments

[doktorpull]

подправил.

Answer 2

[Alexander Mischuk]

webdesignerwall.com/demo/responsive-column-grid
jsfiddle.net/vtajZ/186

Answer 3

[Whitesunset]

Например, для класса video-box задайте жестко высоту:

.video-box {
...
height: 300px;
...
}

Comments

[Alexander Mischuk]

Задавать четкую высоту блоку содержащему неизвестное количество текста это прекрасное решение

Answer 4

[Константин Величко]

После каджого третьего (т.е. последнего в строке) очищяйте поток.
Ставим

<div class="clear"></div>
.clear{
    clear: both;
}

При любой высоте блоков будет все ок
ps я бы сделал эти блоки маркированным списком

jsfiddle.net/Zoxon/g8YgF

Comments

[Константин Величко]

@Mischuk не к каждому третьему, а после третьего блока. А добавлять будет цикл

[Alexander Mischuk]

www.w3.org/wiki/CSS/Selectors/pseudo-classes/:nth-child

[Константин Величко]

@Mischuk Мне так нравится, как учили верстать под IE6 так и верстаю. Через nth и clearfix в принципе тоже должно работать, но никогда не пробовал

Answer 5

[Blah Blag]

Что за извращение? Обреж нахрен текст с помощью жейквери, ну или с помощью серверного языка который ты используешь. А высоту фиксированную сделай

Answer 6

[doktorpull]

очищяйть поток никак так как блоки выводятся потоком если только js добавлять див. А если какое ни будь решение на css. Кроме фиксированного размера.

Answer 7

[Andr'U Sender]

Привет, лови решение:
jsfiddle.net/4HxWS/1
если в кратце то:

.video-box{
    float:left;
    width:30%;
    margin:3px;
    border:solid 1px black;
}
.video-box:nth-child(3)+*{
    clear:both;    
}

Comments

[Константин Величко]

Не это работать не будет

[Andr'U Sender]

как же не будет) если работает всё как часы

[Константин Величко]

@AndruSender попробуйте добавить текста скажем к первому блоку

[doktorpull]

Нет сделал как вы написали но все равно не работает

[Andr'U Sender]

Сейчас попробуйте.

Answer 8

[Алексей]

Согласен с @dsadasdad, лучше всего при таком выводе контента обрезать текст по количеству символов, иначе будет каша. Или только остается использовать masonry (habrahabr.ru/sandbox/37498).