CSS：我怎么能有一个“分散显示单词”而不是html默认显示上/下？

Question

我有一个页面显示从用户输入中检索的不同单词。经常提交的单词越多，其字体大小就越大。

我所拥有的是这样的（ 想象不同的字体大小 ）：

 love 

 war

 food  

 sport

 ...

每个字都位于p内的div标记中，这是我的代码：

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

如何让文字随机显示，分散在整个页面上，而不是仅仅按照HTML顺序从上到下？

我想要的是这样的东西：

 love 

                    war

      food  

              sport

  ...

Answer 1

你需要将这些项目绝对定位在随机的位置：

＆＃13;

＆＃13;

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

＆＃13;

.posts_index {
  height: 180px;
}

.posts_index p {
  position: absolute;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;