热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS:如何垂直包装列表?-CSS:howtomakealistwrapvertically?

Ihaveasomewhatlonglistandwantittowrapintoverticalcolumns.SayIhavealistof10ite

I have a somewhat long list and want it to "wrap" into vertical columns. Say I have a list of 10 items and I want it to be 5 items per column, the layout should be like this:

我有一个很长的列表,并希望它“包装”成垂直列。假设我有10个项目的列表,我希望每列有5个项目,布局应该是这样的:

1   6
2   7
3   8
4   9
5   10

Is there a way to do this in CSS?

有没有办法在CSS中这样做?

2 个解决方案

#1


11  

Sorry, it's actually super simple:

对不起,它实际上非常简单:

ul {
-webkit-column-count: 2;
   -moz-column-count: 2;
        column-count: 2;
}

Check out this DEMO

看看这个DEMO

#2


6  

Use CSS3 columns. In particular, if you set column-width, it should make as many columns as necessary. If you want it to prefer going down rather than giving each column an equal number amount of items, you can set column-fill to auto.

使用CSS3列。特别是,如果设置列宽,则应根据需要生成尽可能多的列。如果您希望它更喜欢向下而不是为每列提供相同数量的项目,您可以将column-fill设置为auto。


推荐阅读
author-avatar
冠臻祥勇8522
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有