1

画像を背景に配置しようとしていますが、画像を右に揃えたいのですが、近づけないでください。margin-right：10pxのようなもの。画像に明示的にマージンを追加せずに、純粋なcssでそれを行うことは可能ですか？

何度か試みましたが、すべて失敗しました... http://jsfiddle.net/cA7Un/1/

前もって感謝します！

4

2 に答える 2

1

パーセンテージを使用することもできますが、これは、コンテナーの幅が同じままであることがわかっている場合にのみ有効です。

background-position: 95% center;

それ以外の場合は、Photoshopなどの画像エディタで画像の右側に10ピクセルの空白を追加できます。

ここに画像の説明を入力してください

于 2011-10-22T05:47:01.343 に答える
0

jsfiddleに配置した例を使用するには：

私は次の余分なスタイルを宣言しました：

.rss
    {
        background-image: url('http://tipabsorb.com/index/wp-content/plugins/category-specific-rss-feed-menu/rss_small_icon.png');
        background-repeat: no-repeat;
        float: right;
        width: 16px;
        min-width: 16px;
        max-width: 16px;
        height: 16px;
        min-height: 16px;
        max-height: 16px;
        margin: 10px;
    }

これは同じ画像を使用しますが、マークアップに追加のdivを追加します。この方法では、画像が背景画像として表示され、余白を使用して、必要な側から遠くに配置できます（左側に必要な場合はフロートも変更します）。

<div class='test' style='width: 300px; height: 100%'>
    <div class="rss">
    </div>
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>

通常のマークアップの前に「rss」divを配置することは、フローに影響を与えるため重要です。divを相対的な親と絶対に配置することによってもそれを行うことができます。

最後に、「。test」クラスから背景を削除しました。これは、「rss」クラスに移動されたためです。

これがお役に立てば幸いです。

于 2011-10-22T09:41:48.507 に答える