Разместите несколько блоков фиксированной ширины / переменной высоты в 2 столбца

Question

Я постараюсь объяснить это как можно лучше. У меня есть несколько div, которые фиксированной ширины, но переменной высоты. Я хочу поместить эти блоки в два столбца внутри контейнера фиксированной ширины. Что произойдет, если дать им всем значение типа float: left, я получу что-то вроде этого:

######### ######### 
# box 1 # # box 2 # 
######### # ..... # 
......... # ..... # 
......... ######### 
######### ######### 
# box 3 # # box 4 # 
# ..... # # ..... # 
######### #########
######### #########
# box 5 # # box 6 #
# ..... # #########
# ..... #
#########

(Периоды пустого пространства)

Что я действительно хотел бы, чтобы верх коробки 3 касался нижней части коробки 1. Есть ли простой способ добиться этого?

Изменить: хотел бы найти решение, которое работает для более чем 2 столбцов. Идеальное блюдо будет работать с упругой разметкой и распределено на столько столбцов, сколько уместится на экране по горизонтали.

Answer 1

Вам нужно чередовать левый и правый плавающие на ваших ящиках.

  .box:nth-child(2n+1){
    float: left;
  }
  .box:nth-child(2n){
    float: right;
  }

Предупреждение, этот код не совместим со старыми браузерами, для тех, кому вы можете установить различные классы CSS программно в каждом другом окне.

Answer 2

Вместо того, чтобы работать горизонтально, работайте вертикально.

Сейчас:

LR
1 ==> 2
3 ==> 4
5 ==> 6

Другой путь:

LR
1 2
\ / \ /
3 4
\ / \ /
5 6

Таким образом, в основном, поместите все нечетные деления в левом столбце, все четные деления в правом столбце. Если вы создаете эти div динамически, сначала сгруппируйте их по нечетным и четным, а затем добавьте их в соответствующий столбец.