如何使文本对齐图像？

Question

我有一个包含图片的超链接，没什么特别的 - 就像这样。

我想根据attachment1将文本对齐到图像的右侧，但结果是根据attachment2。我还需要阻止超链接，使其填充矩形（宽度和高度）

任何人都知道如何实现这个目标吗？

Answer 1

一堆方法：

使用<div>的

<div style="width: 200px;">
<div style="float: left; width: 70px;">
<img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" />
</div>
<div style="float: right; width: 130px;">
<p><strong><a href="#">This is a really really over sized title for a link to neverland</a></strong></p><p>Some other text</p>
</div>
<div style="clear: both;">
</div>

使用<table>

<table width="200">
  <tr>
   <td rowspan="2"><img src="http://a0.twimg.com/profile_images/749158551/Ry_reasonably_small.jpg" width="64" height="64" /></td>
   <td><strong><a href="#">This is a really really over sized title for a link to neverland</a></strong></td>
 </tr>
  <tr>
   <td>Some other text</td>
 </tr>
</table>

Answer 2

把它放在你的页面上，看看发生了什么。干杯

<div style="width:500px;height:250px; padding:10px; padding-left:250px; border:solid 1px black; background-repeat:no-repeat; background-position:left center; background-image:url('https://lh4.googleusercontent.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAlUA/EHduo3GhTDs/s250-c-k/photo.jpg')">
        Google – 52 minutes ago – September 8 marks the anniversary of Star Trek's first broadcast, and naturally ... Amit Singhal originally shared this post: OK, I admit it, I am a die-hard Trekkie. I grew up watching endless ...
        Google – 18 hours ago – By now, you may know that when you search for [define] followed by a word, Google will show you the definition. But did you know that there's a Dictionary mode ...
</div>

Answer 3

与@njk类似，但使用a作为块元素。 http://jsfiddle.net/scrimothy/r6TKz/