css - CSS 列计数首先加载行

Question

嗨，我是 css 的新手，我不知道如何使用以下代码水平而不是垂直加载图像

-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
list-style-type: none;
-webkit-padding-start: 0px;

我得到的看起来像这样

但是，我希望最后一张图片显示在第二列中，然后倒数第二张图片保留在原处。换句话说，我希望在列之前填写行。我怎样才能做到这一点？

Answer 1

你可以试试这个。

的HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

而css是这样的，你可以改变ul元素的宽度。

ul{
    width:100%;
}
ul li{
float:left;
width:30%;    
}

告诉我这有帮助吗