イメージをHTMLテーブルの中に配置するテキスト

Question

HTMLページの画像の隣にテキストを入れる必要があります。だから私は、テーブルに行くための最善の方法だった考え出し...

<table width="500px" > 
    <tbody> 
    <tr> 
     <td align="left"> 
      <p> 
       <b>Isn't she hot??</b> 
      </p> 
     </td> 
     <td align="right"> 
      <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/> 
     </td> 
     </tr> 
    </tbody> 

フィドルhttps://jsfiddle.net/abuMariam/rsnc9vjp/

問題は、私はそのテキストを移動したい場合はどのようなアップのすべての方法またはダウンすべての方法であります。イメージの幅が両方のtd要素を幅広くするので、テキストをそのtd内に垂直に配置する方法がないため、できません。

まだテーブルを保持しても、セル内のテキストを上下に移動できますか？

Answer 1

はい、tdでvertical-align="top"またはvertical-align="bottom"を使用してください。あなたは本当にこのためにtableを使用する必要がありますか？現在、テーブルはめったに使用されるべきではなく、テーブル形式のデータに対してのみ使用されるべきではありません。

<table width="500px" > 
 
    <tbody> 
 
    <tr> 
 
    <td align="left" style="vertical-align:top;"> 
 
     <p> 
 
     <b>Isn't she hot??</b> 
 
     </p> 
 
    </td> 
 
    <td align="right"> \t 
 
     <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

ここでは、テーブルを使用せずにそれを行うことができ一つの方法だ、この方法は、表のセルのように動作するdivsが発生します。

.container { 
 
    width:500px; 
 
    display:table; 
 
} 
 
    .container > div { 
 
    width:50%; 
 
    display:table-cell; 
 
    } 
 
    .container > div p { 
 
     margin:0; 
 
    } 
 
    .container .left { 
 
     vertical-align:top; 
 
    } 
 
    .container .right { 
 
     text-align:right; 
 
    }

<div class="container"> 
 
    <div class="left"> 
 
    <p> 
 
     <b>Isn't she hot??</b> 
 
    </p> 
 
    </div> 
 
    <div class="right"> \t 
 
    <img width="150" height="150" src="http://pixel.nymag.com/imgs/daily/vulture/2015/11/25/25-jennifer-lawrence-directs.w529.h529.jpg" alt="" border="0"/> 
 
    </div> 
 
</div>