Как разбить список ссылок на 3 столбца с помощью CSS3? - PullRequest
3 голосов
/ 23 ноября 2011

У меня есть такой список ссылок:

<div id="linklist">
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
  <a href="link.html">Dummy link text</a>
</div>

Теперь я хочу, чтобы они были в 3 столбцах с (в этом примере) 2 ссылками на столбец. Я знаю, что есть количество столбцов в CSS3 и тому подобное, но как-то ссылки в одной строке. (Я добавлю префикс -webkit-, если потребуется позже.)

CSS:

#linklist a {
    display: inline-block;
    margin: 3px;
    padding: 4px;
    -moz-column-count: 2;
}

Ответы [ 2 ]

17 голосов
/ 23 ноября 2011

Примерно так jsFiddle ?

#linklist {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;  
}
#linklist a {
   display: block;
} 

Свойства CSS column-*, которыми вы располагаете: column-width, column-count, column-gap, column-rule, column-rule-width, column-rule-style, column-rule-color, column-span, column-fill, columns. Источник: MDN .

0 голосов
/ 23 ноября 2011
#linklist {
    -moz-column-count: 3;
}

#linklist a {
    display: block;
    margin: 3px;
    padding: 4px;
}

должно работать, хотя я его не проверял.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...