Как получить уль Li элементы плывут вниз
В обычных элементов уль Li идет слева направо, как в красном изображении. Но мне нужна последовательность зеленого изображения. я использовал поплавок и встроенный блок отображения. Пожалуйста, предложите
Вы можете сделать это с column-count собственности проверить демо ниже
ul {
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px 10px 0 10px;
width: 450px;
background: #3FB441;
padding:10px;
}
ul li {
line-height: 2em;
display: block;
background:#fff;
text-align:center;
margin-bottom:10px;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>Вы можете использовать column-count: 1;. в CSS.
здесь полная информация в w3schools
Вы можете использовать CSS-свойство column-count, чтобы решить вашу проблему.
ul#css3columnlist {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
}
ul#css3columnlist li{
line-height: 2em;
display: block;
}
Смотреть это website
CSS 'собственности столбцам count'. –
Если вам нужен современный подход, вы можете и должны (!) Использовать flexbox. Если вы изучите его, вы увидите, что центрирование по горизонтали и по вертикали легко. http://the-echoplex.net/flexyboxes/ –