如何在垂直排序列表？
我正在使用下面的HTML and 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>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
</ul>
</body>
</html>
输出是:
但是,我想要这个输出.
请给我一个排序列表的代码vertical.
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中不起作用.