html - ブロック内の画像表示-CSS

Question

以下のようなページがあります。

<style type="text/css">
#div1 {
    height: 100px;
    background-color: #CCCCCC;
}
#div2 {
    display: inline;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
#div2 a {
    display: block;
    background-color: #FF9900;
    height: 51px;
    width: 150px;
    padding-right: 50px;
    text-decoration: none;
    word-wrap: break-word;
    white-space: normal;
}
#div2 img {
    border:0;
    float: right;
}
</style>

<div id="div1">
    <div id="div2">
        <a href="">text1 text2 text3 text4  text5 text6 text7 text8<img src="image.jpg"></a>
    </div>
</div>

私が得ているのはこのようなものです。

そして私はこれが欲しい。

これがフィドルです。

Answer 1

にとを追加する必要position: relative;が#div2 aありposition: absolute; right: 0; top: 0;ます#div2 img。

jsFiddleの動作を参照してください：

HTML：

<div id="div1">
    <div id="div2">
        <a href="">text1 text2 text3 text4  text5 text6 text7 text8<img src="http://i.imgur.com/VlyB1.jpg"></a>
    </div>
</div>​

CSS：

#div1 {
    height: 100px;
    background-color: #CCCCCC;
}
#div2 {
    display: inline;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
#div2 a {
    position: relative;
    display: block;
    background-color: #FF9900;
    height: 51px;
    width: 150px;
    padding-right: 50px;
    text-decoration: none;
    word-wrap: break-word;
    white-space: normal;
}
#div2 img {
    border:0;
    position: absolute;
    right: 0;
    top: 0;
}​

Answer 2

コードとデモについてはフィドルを参照してください

フィドル： http： //jsfiddle.net/bfAdE/1/

デモ： http： //jsfiddle.net/bfAdE/1/embedded/result/

注：画像がないので、imgタグに赤の境界線を付けて、デモの幅と高さを設定します。

SS：

Answer 3

フロートに依存する代わりに、要素の配置を試みることができます。

以下を追加します。

#div2 a { position:relative}
#div2 img {position:absolute; top:0; right:0;}

また、画像からフロートを削除します。

こちらの例をご覧くださいhttp://jsfiddle.net/brZdW/1/

Answer 4

これは機能しています：

CSS：

#div1 {
    height: 100px;
    background-color: #CCCCCC;
}
#div2 {
    display: inline;
    height: 48px;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
#div2 a {
    display: block;
    background-color: #FF9900;
    height: 51px;
    width: 200px;
    padding-right: 0px;
    text-decoration: none;
    word-wrap: break-word;
    white-space: normal;
}
#div2 img {
    border:0;
    float: right;
}

HTML：

<div id="div1">
    <div id="div2">
        <a href=""><img src="http://i.imgur.com/VlyB1.jpg"><span>text1 text2 text3 text4 text5 text6 text7 text8</span></a>
    </div>
</div>

Answer 5

これを試してください：http： //jsfiddle.net/erUxF/16/

div2を相対配置することにより、ページではなくdiv2に相対的な要素を絶対配置するという魔法が組み込まれているため、左、右、上を使用してimgを目的の場所に配置できます。