HTML table: 第一列的文字在第二列的图片下方

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>

此屏幕截图显示了问题：

这是它应该的样子以及它在 non-IE 浏览器中的样子：

加法:

下面是使用 DIV 代码的样子 :( 图片在文字上方：

Answer 1

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

<div style="width:350px;float:left">
    <h1>Free Monitor Manager</h1>
    <br>
    It's a simple utility.
    </div>
    <div style="position:relative">
    <img style="vertical-align:top;" src="http://maps.wunderground.com/data/images/ne_rd.gif" />
    </div>

简而言之，这会构建两个 div，一个将您的文本设置在左侧，另一个将文本设置在右侧。你可以把你想要的任何东西放在两边。

但更重要的是，这种东西对跨浏览器更友好。

Answer 2

这是一个更简单的版本。是的，请避免在总体布局中使用 table 标签：

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

<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>

Fiddle 这里： http://jsfiddle.net/mark47/5mt66fpL/

CSS "floats" 将图像放到父容器的右侧。我们正在向它添加一个 margin-left: 20px，因此它和文本之间总是有一些 space。

设置总宽度是可选的。也可以使用 max-width

HTML table: 第一列的文字在第二列的图片下方

HTML table: text in 1st column is under the image in 2nd column

html

css

internet-explorer-11