Я не могу понять, как добиться следующего макета с помощью CSS (возможно, потому что я на самом деле не знаю CSS).
У меня есть такая куча дивов:
<div class="right"> <p>1</p> </div>
<div class="left"> <p>2</p> </div>
<div class="left"> <p>3</p> </div>
<div class="left"> <p>4</p> </div>
<div class="right"> <p>5</p> </div>
<div class="right"> <p>6</p> </div>
(не реальное содержание)
Теперь я хочу, чтобы макет выглядел как два одинаковых столбца div, с «правыми» справа и «левыми» слева, таким образом:
2 1
3 5
4 6
[ Редактировать: в предыдущей версии этого вопроса у меня были текстовые области внутри div, и у всех div были разные имена, такие как «one» и «xyz». ]
Я пробовал что-то вроде
div.right { width:50%; float:right; clear:right; }
div.left { width:50%; float:left; clear:left;}
но это не совсем работает: выдает что-то вроде:
2 1
3
4 5
6
(без "clear" s он беспечно выдает
2 1
3 4
6 5
что не то, что нужно).
Очевидно, что его можно заставить работать, если элементы div упорядочены по-разному, но я бы не хотел этого делать (поскольку эти элементы div генерируются динамически, если в браузере есть Javascript, и я не хочу менять фактический порядок, который отображается в отсутствие Javascript по семантическим причинам). Можно ли добиться желаемого макета?
[Во всяком случае, я хочу, чтобы он не работал в IE или более старых версиях других браузеров, поэтому, если есть решение, которое работает только в браузерах, соответствующих стандартам, ничего страшного: -)]