我试图建立我的第一个响应布局。我想在垂直线中显示列表项，具体取决于宽度。
<div style="height:800px;"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div>
1 5 2 6 3 7 4
如果浏览器调整大小，我希望它成为
1 4 7 2 5 3 6
有人可以帮帮我吗？我一直在尝试几个小时，我不能得到任何东西。我试过使用表，但我不能这样做。
非常感谢您的帮助！我非常感谢！
解决方法
这可以使用CSS3列很容易做到。这里有一个例子，HTML：
<ul id = "limheight"> <li><a href="">Glee is awesome 1</a></li> <li><a href="">Glee is awesome 2</a></li> <li><a href="">Glee is awesome 3</a></li> <li><a href="">Glee is awesome 4</a></li> <li><a href="">Glee is awesome 5</a></li> <li><a href="">Glee is awesome 6</a></li> <li><a href="">Glee is awesome 7</a></li> <li><a href="">Glee is awesome 8</a></li> <li><a href="">Glee is awesome 9</a></li> <li><a href="">Glee is awesome 10</a></li> <li><a href="">Glee is awesome 11</a></li> <li><a href="">Glee is awesome 12</a></li> <li><a href="">Glee is awesome 13</a></li> <li><a href="">Glee is awesome 14</a></li> <li><a href="">Glee is awesome 15</a></li> <li><a href="">Glee is awesome 16</a></li> <li><a href="">Glee is awesome 17</a></li> <li><a href="">Glee is awesome 18</a></li> <li><a href="">Glee is awesome 19</a></li> <li><a href="">Glee is awesome 20</a></li> </ul>
CSS：
#limheight {
height: 300px; /*your fixed height*/
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
display: inline-block; /*necessary*/
}
和一个小演示：little link。
希望有帮助！
