목록 태그가있는 그리드 열, 모든 추가 HTML 목록 요소에 대해 자동 너비가 활성화 된 상태에서 3 개의 열마다 올바른 순서로 표시해야합니다.
이것은 내 예입니다.
<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
지금까지 Safari 브라우저에서이 작업을 수행하는 것이 중요합니다.이 문제를 전혀 해결할 수없는 것 같습니다. 어떤 도움도 필요합니다. :)
테스트 링크 :