2 Колонки

Question

[Borgius]

Есть контейнер, в него поступают новые div-ы c классами left or right
ширина 49%, высота — разная, приходят в случайном порядке.
Есть ли способ, используя только css расположить их каждый у своей стороны экрана
и чтобы не было вертикальных пробелов
пример:

<div class='container'>
   <div class='left'>constain 3 lines</div> 
   <div class='right'>constain 1 line</div> 
   <div class='left'>constain 5 lines</div> 
   <div class='right'>constain 4 lines</div> 
   <div class='right'>constain 2 lines</div> 
   <div class='left'>constain 5 lines</div> 
   <div class='right'>constain 4 lines</div> 
</div>

Спасибо.

Answer 1

[SilentImp]

нет, нету.
сделайте 2 колонки и пихайте туда блоки.

Comments

[Borgius]

Да, к сожалению Вы правы. Надеялся на чудо :)

Answer 2

[Назар Мокринский]

А если поступающие данные перед вставкой перераспределять в подконтейнер для элементов с классами left и right?
Либо уже после вставки этим может заняться jQuery по строчке на left и right, если это JS интерфейс.
Вот пост, там, полагаю есть возможность, которая вам нужна, но это всё только будущее. У меня есть усовершенствованная версия плагина для Template Layout, если он вам подойдёт — могу поделиться. А так просто не получится (пока что).

Answer 3

[MT]

Попробуйте вместо 49% задать ширину 50%, дополнив её отрицательным отступом в противоположном направлении для обхода специфики округления процентных значений в IE:

.left,
.right {width: 50%; }

.left {
    float: left;
    margin-right: -1px;
}

.right {
    float: right;
    margin-left: -1px;
}

Comments

[MT]

(Это если под вертикальным пробелом подразумевается вертикальный зазор между двумя [горизонтально] соседними блоками — левым и правым.)

[trueClearThinker]

Достаточно у правого блока указать clear:right;.