マルチラインテキストの右上に浮動小数点画像

Question

アイコンを右上に配置します。私は多くのことを試しましたが、何も動かないようです。テキストが実際に長かったり、小さなデバイスにある場合にのみ問題になります。ここで

.container { 
 
    float: left; 
 
    position: relative; 
 
    width: 50%; 
 
} 
 
.image-right { 
 
    float: right; 
 
    position: relative; 
 
}

<div class="container"> 
 
    <h3> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
 
    <span class="image-right"> 
 
     <img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png"> 
 
    </span> 
 
    </h3> 
 
</div>

Answer 1

を使用する必要があります。それは、http://www.w3schools.com/css/css_float.aspのように、

要素の後ろにフローティング要素が流れます。

<style> 
 
.container{ 
 
    float: left; 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.image-right { 
 
    float: right; 
 
    position: relative; 
 
} 
 
</style> 
 
</head> 
 

 

 
<div class="container"> 
 
<h3> 
 
    <img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png" 
 
     class="image-right"> 
 

 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
 

 

 
</h3> 
 
</div>

Answer 2

答えです。あなたはH3タグ内のテキストの前に画像を入れてposition: absolute;

.container{ 
 
    float: left; 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.container h3 { 
 
    position: relative; 
 
} 
 

 
.image-right { 
 
    float: right; 
 
    top: 0; 
 
    right: 0; 
 
    position: absolute; 
 
}

<div class="container"> 
 
    <h3> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua 
 
    <span class="image-right"> 
 
     <img style="width:13px; height:13px" src="http://findicons.com/files/icons/2354/dusseldorf/32/plus.png"> 
 
    </span> 
 
    </h3> 
 
</div>