Menu
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.
355
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.
112
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
