html - 在CSS中创建简单的标签云

我正在尝试在CSS中创建标签云。

例如，如果我在同一行中有5个链接(<a href)，则我希望其中一个出现得很少，而另一个链接则稍稍向下，但是在同一行中。我尝试了padding-top:20px和display:block，但是它使链接移到了下一行。

 <style>
    .cloud
    {
    height:200px;
    }
    .cloud1
    {
    font-size:26px;
    margin-top:2px;
    }
    .cloud2
    {
    font-size:18px;
    margin-top:5px;
    }
    </style>




   <div class="cloud">
     <a class="cloud1" target="_blank" href="">Movie</a> </span>
     <a class="cloud2" target="_blank" href="">news</a> </span>
     <a class="cloud2" target="_blank" href="">Movie</a> </span>
     <a class="cloud1" target="_blank" href="">123</a> </span>
    <br>
     <a class="cloud1" target="_blank" href="">rand</a> </span>
     <a class="cloud2" target="_blank" href="">news</a> </span>
     <a class="cloud2" target="_blank" href="">Movie</a> </span>
     <a class="cloud1" target="_blank" href="">ok</a> </span>

     </div>

这是要播放的http://jsfiddle.net/fznjydyd/。我尝试了显示，位置，边距，填充等各种操作。但是似乎没有任何帮助。

最佳答案

您可以设置位置：相对于.cloud的位置，相对于position: absolute到.cloud-X的位置，然后将其赋予每个位置所需的位置。

像这样

<div class="cloud">
    <a href="" class="tag cloud1">aaaaa</a>
    <a href="" class="tag cloud2">bbbbb</a>
    <a href="" class="tag cloud3">ccccc</a>
    <a href="" class="tag cloud4">ddddd</a>
    <a href="" class="tag cloud5">ddddd</a>
</div>

.cloud{
    height: 200px;
    width: 200px;
    position: relative;
}

.tag{
    position: absolute;
}

.cloud1{
    top: 10px;
    left: 5px;
}

.cloud2{
    right: 10px;
    top: 15px;
}

.cloud3{
    bottom: 20px;
    left: 55px;
}

.cloud4{
    top: 90px;
    left: 155px;
}

.cloud5{
    top: 70px;
    left: 65px;
}

如果您有很多标签，这很难做到，但是它可以工作，并且您可以做到。

I code this jsfiddle向您显示可以。 :)

关于html - 在CSS中创建简单的标签云，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30831073/