Как я могу лучше всего создать этот макет с CSS? ⇐ CSS

[Anonymous]

У меня есть несколько дел с нерегулярными высотами, а некоторые могут расти или сжиматься в зависимости от ввода пользователя. Это разметка для настольного компьютера. < /P>
Вот основная html: < /p>

Код: Выделить всё

one
two
three
four
five

А и вот макет макета (с небольшим количеством добавленного контента):

здесь, который я использовал для достижения того, что достигает, чтобы достичь, чтобы достичь достижения, чтобы достичь достижения, чтобы достичь достижения, чтобы достичь достижения, чтобы достичь достижения достижения, чтобы получить.parent{
width:500px;
display:flex;
flex-flow: column wrap;
height:400px;
}
.div{
width:250px;
}
.one{
background:green;
order:0;
}
.two{
background:pink;
order:1;
}
.three{
background:skyblue;
order:4;
}
.four{
background:yellow;
order:5;
}
.five{
background:lightsalmon;
order:3;
}
< /code>
Итак, вот проблема. Единственный способ, которым макет работает с Flexbox, заключается в том, что я поместил произвольную высоту 400px на родительский Div, который я не могу сделать из -за различного содержания в каждом из детей, потенциально растущих в прошлом, этот предел 400px. порядок пронумерованных DOV - один, два, три, четыре, пять в одном непрерывном столбце. столбцы. Ох, и мне тоже не разрешено использовать JavaScript.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... t-with-css