Проблема с отображением списка элементов с использованием столбца-столбца

eugneio dsjgfo спросил: 28 апреля 2018 в 09:34 в: html5

Я пытаюсь показать 3 списка элементов, используя свойство CSS3 count-count. Я хочу показать его с помощью Title column 1 как title для моего столбца и показать под ним список элементов.
Моя проблема в том, что мои столбцы перемещают мои элементы в другой неправильный столбец.

Это мой код:

#columnasFooter{
  column-count: 3;
}

<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>

1 ответ

Hille Flash Thunder ответил: 28 апреля 2018 в 09:46

Это абсолютно нормальное поведение.

Если вы не хотите разбивать свои списки, вам нужно добавить дополнительный стиль:

#columnasFooter li{break-inside: avoid-column;}
#columnasFooter{column-count: 3;}
#columnasFooter li{break-inside: avoid-column;}
<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>
eugneio dsjgfo ответил: 28 апреля 2018 в 09:45
Большое спасибо. Он работает отлично.
Flash Thunder ответил: 28 апреля 2018 в 02:47
@eugneiodsjgfo Если бы я ответил на ваш вопрос, пожалуйста, примите ответ, поэтому он не будет отображаться для других, как без ответа. Thanx!