我在下面使用这个HTML and CSS对列表进行排序的代码vertical，输出是horizontal sorted.
我的示例代码：
<!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>
输出是：
但是，我想要这个输出。
请给我排序列表的代码vertical.
Use CSS 列 https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts: (JSFiddle http://jsfiddle.net/trPRV/)
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 中不起作用。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
