Is there a way to achieve a css float:top attribute in javascript, either using native code or jQuery? I have a large list of items that I want floated, stacking them top to bottom and left to right. Currently, floating them left stacks them left to right and then top to bottom.
Any ideas on how to simulate float:top with JavaScript?
For example:
<style>
*{margin:0;padding:0;}
ul {
height:80px;
width:350px;
margin:10px;
padding:0;
outline:1px solid;
}
li{
float:left;
list-style:none;
margin:0;
padding:3px 5px;
}
</style>
<ul>
<li>1679</li>
<li>1682</li>
<li>1732</li>
<li>1761</li>
<li>1773</li>
<li>1781</li>
<li>1788</li>
<li>1791</li>
<li>1797</li>
<li>1799</li>
<li>1832</li>
<li>1861</li>
<li>1873</li>
<li>1879</li>
<li>1881</li>
<li>1882</li>
<li>1888</li>
<li>1891</li>
<li>1897</li>
<li>1899</li>
<li>1932</li>
<li>1932</li>
<li>1961</li>
<li>1961</li>
</ul>
You can find more information on a similar question here, although it focuses on CSS solutions rather than JS-based ones. And there's also this question that offers a specific layout fix implementation.