テキストをインラインで画像に揃えるにはどうすればよいですか？

Question

このように画像の下にテキストを配置するにはどうすればよいですか？ここで

はコードです： https://jsfiddle.net/vzjj9eLy/

HTML：

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span> 

CSS：

.test{ 
    display:block; 

} 
.test img{ 
    display:block; 
    position: relative; 
    left: 50px; 
} 

Answer 1

はこれが何をしたいですか？

HTML：

<span class = "test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316"> 
    <span class="test_text"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text ever since 
     the 1500s, when an unknown printer took a galley of type and scrambled it to 
     make a type specimen book. 
    </span> 
</span> 

はCSS：

.test{ 
    width: 50%; 
} 
img{ 
    float: right; 
} 
.test.test_text{ 
    float: left; 
} 

あなたは私がちょうど与えるためにテーブルを使用し、私は考えることができhere

Answer 2

最も簡単な方法を作業それを見ることができますあなたはアイデアですが、divを使用して左に余白を設定する必要があります。あなたはのdiv要素を使用して作成することができ、その後、左画像内のテキストを整列させる

<span class="test2"><img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&amp;a" alt="asd" width="316" height="316" /></span> 
    <table width="510" height="100" border="0"> 
     <tr> 
     <td width="63" height="96">&nbsp;</td> 
     <td width="437"><span class="test111">Lorem Ipsum is simply dummy text of the printing and typesetting 
      industry. Lorem Ipsum has been the industry's standard dummy text ever since 
      the 1500s, when an unknown printer took a galley of type and scrambled it to 
      make a type specimen book. </span></td> 
     </tr> 
    </table> 

Answer 3

。 下記のコードは、私が添付したCSSのインラインを参照してください。

<div style="width:48%;float:left;vertical-align:bottom;margin:0px;">   
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</div> 
<div style="width:50%;float:right;vertical-align:top;margin:0px;"> 
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a" alt="asd" width="316" height="316"> 
</div>