如何显示列表项作为列？
我正在尝试构build我的第一个响应式布局。 我想根据宽度以垂直线显示列表项目。
<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
如果浏览器resize，我希望它成为
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*/ }
和一个小演示： 小链接 。
希望有所帮助！
如果你看看下面的例子 – 它使用固定宽度的列，我认为这是所要求的行为。
http://www.vanderlee.com/martijn/demo/column/
如果底部示例与顶部相同，则不需要jquery列插件。
ul{margin:0; padding:0;} #native { -webkit-column-width: 150px; -moz-column-width: 150px; -o-column-width: 150px; -ms-column-width: 150px; column-width: 150px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; -o-column-rule-style: solid; -ms-column-rule-style: solid; column-rule-style: solid; }
<div id="native"> <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> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> </ul> </div>
谢谢你这个例子，SPRBRN。 它帮助了我。 我可以根据上面给出的代码来build议我使用的mixin：
//multi-column-list( fixed columns width) @mixin multi-column-list($column-width, $column-rule-style) { -webkit-column-width: $column-width; -moz-column-width: $column-width; -o-column-width: $column-width; -ms-column-width: $column-width; column-width: $column-width; -webkit-column-rule-style: $column-rule-style; -moz-column-rule-style: $column-rule-style; -o-column-rule-style: $column-rule-style; -ms-column-rule-style: $column-rule-style; column-rule-style: $column-rule-style; }
使用：
@include multi-column-list(250px, solid);
根据需要创build一个包含尽可能多的列表元素的列表。 然后把列表放在div中，设置style = column-width和style = column-gap，以匹配列表元素中的信息。 不要设置style = columns。 完全适应屏幕大小的响应列表。 没有插件需要。
你可以使用CSS3来做到这一点。
这是HTML代码片段：
<ul id="listitem_ascolun"> <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>
