Как переверстать блоки при помощи CSS?

Question

[Kesantielu]

Имеются контейнеры следующей структуры:

<div id="parent">
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
    <div class="even"></div>
    <div class="odd"></div>
    <div class="even"></div> 
</div>

Можно ли с помощью только одного CSS преобразовать отображение контейнеров так, как изображено на рисунке?

Comments

[Лариса]

Спасибо, очень интересная задача)

Answer 1

[Сергей Горячев]

Оригинал - https://jsfiddle.net/bjopf7o1/
Перестройка - https://jsfiddle.net/53jsxowg/

Вся магия в коде:

.wrapper {
  width: 150px;
}

.wrapper {
  width: 450px;
  display: flex;
  flex-direction: column;
  height: 70px;
  flex-wrap: wrap;
}

Еще вариант - https://jsfiddle.net/009qhczy/

.wrapper {
  width: 450px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.block:nth-child(odd) {
  order: 1;
}
.block:nth-child(even) {
  order: 2;
}

Для особо ярых противников flex - https://jsfiddle.net/rxe51vtf/
Решение с использованием абсолютного позиционирования.

Comments

[Лариса]

А без использования flex, нет решения?

[Сергей Горячев]

Лариса: Можно, через абсолютное позиционирование - https://jsfiddle.net/rxe51vtf/ , только не вижу смысла рисовать такого рода геморрой, когда flex вполне себе корректно решает задачу.

Answer 2

[Андрей]

Да
html5.by/blog/flexbox

Comments

[drtvader]

отличное и современное решение, но только для новых браузеров + не стоит забывать префиксы, для IE10 например.

[Anton Filippov]

drtvader: у вас бельё тоже по 5 лет имеет характеристику "новое" ?

[drtvader]

Anton Filippov: а я написал про новое?)

[Anton Filippov]

drtvader: ie10 не новый браузер

[drtvader]

Anton Filippov: для НОВЫХ браузеров + для IE10)

Answer 3

[raw1]

попробуй

parent div:nth-child(n/2) {
      clear:both
}

Может n/3