много дел в газетном макете с 3 колонками

Question

В настоящее время у меня есть несколько div неопределенной длины / высоты.они содержат несколько гиперссылок в виде списка.Практически желаемый эффект достигается путем предоставления этих div float:left; width:150px; margin: 10px;. Однако в сценарии первого div, содержащего только 1 ссылку, и второго div, содержащего 10, я получаю следующий результат (числа представляют div):

1  2  5
   3  6
   4  7
8

Желаемый результат, конечно, следующий:

1  3  6          1  4  7
2  4  7    or    2  5  8
   5  8          3  6

Answer 1

Есть три решения, каждое со своими проблемами.

Сначала вы можете установить ограничение по высоте для всего элемента или использовать фиксированную высоту.Это, в сочетании со свойством переполнения, даст вам аккуратную сетку элементов.

ul li {
    width: 200px;
    height: 200px;
    float: left;
    overflow: hidden;
}

Кроме того, вы можете вытащить div с в три разных контейнера, каждый в отдельности.Это также даст вам три ваших столбца, но вам, вероятно, нужно будет что-то сделать на стороне сервера, чтобы убедиться, что высота элементов в каждом столбце распределена равномерно:Модуль столбцов, который позволяет аккуратно и легко создавать столбцы, но не поддерживает IE вообще.

ul {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
}