4

помогите пожалуйста решить проблему

есть список в блоке определённой высоты. высота списка больше высоты блока, поэтому он отображается в 2 колонки

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

1 ответ 1

16

Обновление

http://jsfiddle.net/4E9sB/

.wrap ol {
  list-style-position: inside;
  -moz-column-count: 2; /* Firefox */
  -webkit-column-count: 2; /* Safari and Chrome */
  column-count: 2;
  list-style-type: decimal;
  height: 200px;
}
<div class="wrap">
  <ol>
    <li><span>Real time analitics dashme analitics daboard</span></li>
    <li><span>Real  dashboard</span></li>
    <li><span>Real time analitics dashboard</span></li>
    <li><span>Real time ard</span></li>
    <li><span>Real time analitics dame analitics dame analitics dashboard</span></li>
    <li><span>Real titics dashboard</span></li>
    <li><span>Real time analitics dashboard</span></li>
    <li><span>Real time anahboard</span></li>
    <li><span>Real time analitics dme analitics dame analitics daashboard</span></li>
    <li><span>Real time analitics dashboard</span></li>
    <li><span>Real time anahboard</span></li>
  </ol>
</div>

6
  • спасибо за вариант решения. но на картинке немного другое - сначала заполняется первый столбец до полной высоты блока-родителя
    – cyklop77
    3 ноя 2013 в 7:43
  • Так оно так и есть пробовали менять? jsfiddle.net/4E9sB Обновил. 3 ноя 2013 в 8:00
  • @vkovalchuk88, сначала должна заполняться левая колонка, на всю высоту блока, и только если не влезло -- правая. Смотрите картинку, приложенную к вопросу.
    – Risto
    3 ноя 2013 в 8:22
  • Вы смеетесь? А как в моем примере, по другому? 3 ноя 2013 в 8:24
  • @vkovalchuk88, увеличил высоту в несколько раз -- действительно работает, прошу простить. Текст крупный, при увеличении на 100-200 пикселей разницы не видно.
    – Risto
    3 ноя 2013 в 8:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.