如何使用CSS在div的右側顯示小圖片？

我試圖讓格式類似於DIV以下：如何使用CSS在div的右側顯示小圖片？

Loading XYZ Data .... [loading image]

再後來，當數據被加載，那麼我想改用CSS類別的東西，並導致：

Loading XYZ Data .... [green checkbox image]

這怎麼辦？目前我正在這樣做：

.loading 
{ 
    background-image: url(images/loading.gif); 
    background-position: 100% right; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
}

但是，圖像並未顯示在下一個我想要的位置旁邊。有任何想法嗎？

來源

2011-06-28 Click Upvote

您可以使用這樣的事情：

span.bg_square 
{ 
    display: block; 
    background-image: url(http://www.vesivus.com/minis/little_square.gif); 
    background-repeat: no-repeat; 
    background-position: right; 
    padding-right: 20px; 
    width: 70px; 
}

Example here。

來源

2011-06-28 13:36:05 Kyle

這是可行的，但是文本停止位置和圖像開始之間有一段距離，例如'Loading ... [image]'而不是'Loading ... [image]'。有任何想法嗎？ –

只需減少'padding-right'值。 – Kyle

可能是因爲我沒有使用寬度？我想在寬度不同的不同地方使用這個類。 –

background-position: 100% right如果這就是你的想法，它並沒有使它成爲100％。如果你想使用背景圖片，你最好將padding-right添加到.loading div，然而值的寬度是加載gif的很多像素。然後使用background-position: right top。你也不需要background-attachment。

來源

2011-06-28 13:36:37

如何使用CSS在div的右側顯示小圖片？

回答

相關問題