带有列表标签的网格列,我需要每3列以正确的顺序显示,并 for each 额外的HTML列表元素启用自动宽度.
这是我的例子:
<style>
ul {
margin: 0;
padding: 0;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
width:auto;
}
li {
float: left;
display: inline-block;
list-style: none;
position: relative;
height: 50px;
width: 50px;
}
</style>
<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>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
display: -webkit-flex;
.
我想像这样转换输出:
1 4 7 10
2 5 8 11
3 6 9 12
很重要的一点是,到目前为止,我无法解决这个问题,我需要任何帮助:)
测试链接: