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

Question

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

######### ######### 
# 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

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

Сейчас:

L     R
1 ==> 2
3 ==> 4
5 ==> 6

Другой способ:

L   R
1   2
\/  \/
3   4
\/  \/
5   6

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