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%;    
}

告诉我这有用吗