HTML表格：第1列中的文字位于第2列的图像下方

Question

作为一名专业的C ++程序员，我是HTML的新手：）

此问题在Internet Explorer 11 Windows 10下可重现。

其他浏览器（Edge，Firefox，Chrome） - 运行正常。

代码：

<table>
<tr>
<td width=500><h1>Free Monitor Manager</h1>
<br>
It's a simple utility.
<br><br>
</td>
<td width=20></td>
<td><img style="vertical-align:top;" src="main_window.png" /></td>
</tr>
</table>

此屏幕截图显示了问题： http://aikmeng.com/post/62817541825/how-to-mock-dbcontext-and-dbset-with-moq-for-unit

以下是它应该如何以及它在非IE浏览器中的表现：

加成：

以下是使用DIV代码的外观:(图片位于文字上方：

Answer 1

这是一个更简单的版本。是的，请避免使用<img>标签进行总体布局：

table

.prod-img {
    margin-left: 20px;
    float: right;
}
/* this is optional if you want to set an overall width */
.outer-container {
    width: 700px;
}

这里小提琴： http://jsfiddle.net/mark47/5mt66fpL/

CSS将浮动图像“浮动”到父容器的右侧。我们正在添加<div class="outer-container"> <img src="http://placehold.it/350x150" class="prod-img"> <h1>Free Monitor Manager</h1> <p>It's a simple utility.</p> </div>，因此它与文本之间总是有一些空格。

设置总宽度是可选的。也可以使用margin-left: 20px

Answer 2

相信我，你仍然希望用DIV而不是表来做这种事情。 像这样：

TBlobField(qryTemp.FieldByName('FileData')).LoadFromStream(MemoryStreamFileData);

简而言之，这会构建两个div，一个是您的文本设置在左侧，另一个是右侧设置的相对于它。 你可以在任何一方放任何你想要的东西。

但更重要的是，这种事情更适合跨浏览器使用。