如何在垂直排序列表？ [英] How to sort list in vertical?
本文介绍了如何在垂直排序列表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 HTML和CSS 代码在 vertical 中排序列表，输出为 horizontal 排序。
我的示例代码：
<！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> 1< / li>< li> 3< / li>< ; li> 6< / li>
< / ul>
< / body>
< / html>
输出为：
但是，我想要这个输出。 / p>
>
请给我在垂直中的排序列表的代码。
解决方案
使用 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;
}
请注意，这将无法在IE≤ 9中使用。
I'm using this below HTML and CSS code to sort list in vertical , the output is horizontal sorted.
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.
解决方案
Use CSS columns: (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.
这篇关于如何在垂直排序列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
