如何对列表进行垂直排序?

时间：2022-05-04 07:40:46

I'm using this below HTML and CSS code to sort list in vertical , the output is horizontal sorted.

我使用下面的HTML和CSS代码对列表进行垂直排序，输出是水平排序的。

My example code:

我的示例代码:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Tiles</title>
    <style type="text/css">
    #tiles {
        list-style: none;
        margin: 0px;
    }
    #tiles li {
        float: left;
        margin: 20px;
        width: 300px;
        height: 200px;
        background-color: #dddddd;
        font-size: 72px;
        text-align: center;
        vertical-align: middle;
    }
    </style>
  </head>
  <body>
    <ul id="tiles">
       <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
    </ul>
  </body>
</html>

Output is :

输出是:

如何对列表进行垂直排序?

But , I want this output.

但是，我想要这个输出。

如何对列表进行垂直排序?

Please give me code for sort list in vertical.

请给我垂直排序列表的代码。

2 个解决方案

#1

9  

Use CSS columns: (JSFiddle)

使用CSS列(JSFiddle):

ul {
    column-width: 380px;
    -webkit-column-width:380px;
    -moz-column-width: 380px;
    height:440px;
}

#tiles {
    list-style: none;
    margin: 0px;
}
#tiles li {
    /* float: left; */
    margin: 20px;
    width: 300px;
    height: 200px;
    background-color: #dddddd;
    font-size: 72px;
    text-align: center;
    vertical-align: middle;
}

Note that this won't work in IE≤9.

注意,这不会在IE≤9。

#2

0  

CSS

CSS

    #tiles {         
        list-style: none;        
        margin: 0px; 
        width:300px;
        height:200px;   
          }     
     ul   {
        column-width: 85px;
        -webkit-column-width:85px;
        -moz-column-width: 85px;
        height:60px;
         }

    #tiles li {         
        float: left;
        margin: 20px;        
        width: 50px;         
        height: 30px;         
        background-color: #dddddd;         
        font-size: 16px;         
        text-align: center;         
        vertical-align: middle;     }

See the fiddle

看到小提琴

This is shroud as your output image

这是您的输出映像包

#1

9  

Use CSS columns: (JSFiddle)

使用CSS列(JSFiddle):

ul {
    column-width: 380px;
    -webkit-column-width:380px;
    -moz-column-width: 380px;
    height:440px;
}

#tiles {
    list-style: none;
    margin: 0px;
}
#tiles li {
    /* float: left; */
    margin: 20px;
    width: 300px;
    height: 200px;
    background-color: #dddddd;
    font-size: 72px;
    text-align: center;
    vertical-align: middle;
}

Note that this won't work in IE≤9.

注意,这不会在IE≤9。

#2

0  

CSS

CSS

    #tiles {         
        list-style: none;        
        margin: 0px; 
        width:300px;
        height:200px;   
          }     
     ul   {
        column-width: 85px;
        -webkit-column-width:85px;
        -moz-column-width: 85px;
        height:60px;
         }

    #tiles li {         
        float: left;
        margin: 20px;        
        width: 50px;         
        height: 30px;         
        background-color: #dddddd;         
        font-size: 16px;         
        text-align: center;         
        vertical-align: middle;     }

See the fiddle

看到小提琴

This is shroud as your output image

这是您的输出映像包

标签：

相关文章