CSS: How can I have a “scatter display of words” rather than the html default display up/down?

Question

I have a page that displays different words retrieved from users input. The more a word is frequently submitted the bigger its font-size is.

What I have is something like this ( imagine different font-size ):

 love 

 war

 food  

 sport

 ...

Each word is in a p tag inside a div here is my code:

<div class="posts_index">
    {{#each posts}}
        <p>{{word}}</p>
    {{/each}}
</div>

How can I have the words to be displayed randomly, scatter across the page, rather than just following the HTML order from up to down ?

What I want is to have something like this:

 love 

                    war

      food  

              sport

  ...

Answer 1

You need to absolutely position the items at random postitions:

 $(function () { $(".posts_index p").each(function (i, elt) { $(elt).css({ left: Math.random() * 150, top: Math.random() * 150 }); }); }); 

 .posts_index { height: 180px; } .posts_index p { position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="posts_index"> <p>love</p> <p>war</p> <p>food</p> <p>sport</p> </div>