在css中創建簡單的標籤雲

例如，如果我有在同一行5個環節(<a href)，我想一個出現小起來，另一個鏈接有點下降，但在同一line.I試圖padding-top:20px和display:block但它使鏈接移動到下一行。

enter image description here

<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/到play.I嘗試過各種事情顯示，位置，邊緣，填充。但似乎沒有任何幫助我。

來源

2015-06-14 Vishnu

對於誰投票結束這個問題。我編輯了我的問題。 – Vishnu

你可以使用'position：relative'來調整位置（[see fiddle]（http://jsfiddle.net/hrczg3wx/）），但是你不可能通過純粹的CSS實現你在截圖中看到的東西，除非你手動應用每個項目的樣式來定位它們。 – Billy

@比利：是的，我想完全像那樣..但它重疊時調整大小 – Vishnu

您可以設置位置：相對於.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向你展示你可以。 :)

來源

2015-06-14 16:45:12

在css中創建簡單的標籤雲

回答

相關問題