我有一个未排序的列表,在全尺寸页面上看起来像这样:
Item 1
Item 2
Item 3
Item 4
Item 5 <some content here>
Item 6
Item 7
Item 8
Item 9
但我希望它转到:
Item 1 Item 4 Item 7
Item 2 Item 5 Item 8
Item 3 Item 6 Item 9
<some content>
在手机的 100% 宽度处。
我有列表和 div 中的“其他内容”来做我需要的,但是关于列表,我应该使用表格,还是有可以与无序列表一起使用的 CSS?
最佳答案
试试这段代码
ul {
list-style: none;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 300px;
width: 100%;
}
li {
flex: 1;
min-height: 100px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
调整 ul 和 li 的高度以满足您的设计需要
关于javascript - 列出响应式类次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36994365/