Question

我有一个iframe，其高度为100px，宽度为450px。我正在尝试格式化一个html表，以便它具有以下布局：

_______
|     | GREY_TEXT: BLUE_TEXT
|     | Hyperlink
| img | SOME_TEXT ~ DATE
|     | BLACK_TEXT
-------

其中img为100高80宽

我遇到的问题是GREEN_Text有时会在iframe中的图像上方取决于超链接的长度。黑色文本长度无关紧要，因为它可以被切断，我不会放垂直卷轴。

我的代码是：

    <!DOCTYPE html>
<html>
<body>
<table height="100" width="450">
<tr>
<td height="100" width="80">
<table style="margin-top:50px">
<img align="top" src="myPicPath.png" height="100" width="120">
</table>
</td>
<td height="100" width="200">
<table height="25" width="387" style="margin-top:-20px">
<tr>
<td width="20">
<p style="color:#A0A0A0; font-family:arial; font-size:12px;"> GREY_TEXT:</p>
</td>
<td  width="86">
<p style="color:blue; font-family:arial; font-size:12px;">BLUE_TEXT
</td>
<td width="0">
<!--left Blank-->
</td>
<td width="205" style="text-align:right;">
<p style="color:#A0A0A0; font-family:arial; font-size:12px;"> SOME_TEXT | DATE
</p>
</td>
</tr>
</table>
<table height="25" style="margin-top:-20px">
<tr>
<td>
</td>
</tr>
</table>
<table height="50" width="370">
<a style="font-family:arial; font-size:15px;" target="_blank" href="http://SOMESITE.com"> HyperLink</a>
<p align="justify" style="font-family:arial; font-size:13px;">BLACK TEXT
</p>
</table>
</table>
</tr>
</table>
</body>
</html>

Answer 1

你在做电子邮件吗？你需要一个适当的缩进，你使用表，否则，它只是变得一团糟：

<!DOCTYPE html>
<html>
    <body>
        <table height="100" width="325">
            <tr>
                <td height="100" width="120"><img align="top" src="myPicPath.png" height="100" width="120" style="display: block;"></td>
                <td height="100" width="205">
                    <table height="25" width="205" style="margin-top:-20px">
                        <tr><td><span style="color:#A0A0A0; font-family:arial; font-size:12px;"> GREY_TEXT:</span> <span style="color:blue; font-family:arial; font-size:12px;">BLUE_TEXT</span></td></tr>
                        <tr><td><a style="font-family:arial; font-size:15px;" target="_blank" href="http://SOMESITE.com"> HyperLink</a></td></tr>
                        <tr><td><span style="color:#A0A0A0; font-family:arial; font-size:12px;"> SOME_TEXT | DATE</span></td></tr>
                        <tr><td><span style="font-family:arial; font-size:13px;">BLACK TEXT</span></td></tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>
</html>

Answer 2

如果我的理解是正确的，那么无论你的右栏有多长，你都希望你的图像始终拥抱左栏的顶部。这个jsfiddle显示了这种行为：http://jsfiddle.net/smy8z/

style="vertical-align: top;"中包含图片的密钥<td>。

我建议以完全不同的方式解决这个问题。使用表格进行布局，使用属性进行定位以及使用内联样式进行样式设置都是现代Web中不合规范的做法。通常，您将使用对您的内容最有意义的HTML元素，因此表格将用于表格式数据（考虑Excel电子表格）。过去，您可以将样式和布局规则保存在单独的CSS文件中。这将分离您的职责（html中的总体布局，css中的特定样式），并使您的HTML保持清洁和清晰。

格式化用于iframe的html表格内容

2 个答案: