Question

我有以下代码;然而，它并没有给我预期的结果 - 我所追求的是按照下面的图像，我做错了什么？

<style>
table.control_grid tr {
    text-align: center;
    width: 200px;
}
table.control_grid td {
    width: 120px;
    height: 48px;
}
table.control_grid a {
    text-decoration: none;
}
table.control_grid img {
    vertical-align: text-top;
}
</style>

<table class="control_grid">
    <tr>
        <td><img width="48" height="48" src="icon1.gif">My text & stuff, overflow??</td>
        <td><img width="48" height="48" src="icon1.gif">Icon1</td>
        <td><img width="48" height="48" src="icon1.gif">Icon2</td>
        <td></td>
        <td></td>
    </tr>
</table>

期望的结果：

Desired result http://mpasqualone.com/wantedResult.gif

Answer 1

你应该浮动图像。

浮动：左;

Answer 2

尝试添加以下CSS：

table { table-layout: fixed; }

这会触发“固定表格布局算法”，其中水平布局仅取决于表格的宽度和列的宽度，而不是单元格的内容。

除了解决您的问题之外，这也提高了性能：固定的表格布局允许浏览器比自动表格布局更快地呈现表格，因为浏览器可以在收到第一行后开始显示表格。 / p>

Answer 3

你错过了一件事，关闭这样的img标签（不要忘记alt attr :)）

<img width="48" height="48" src="icon1.gif" alt="" />

以上代码符合xhtml

Answer 4

按此使用以获得所需的输出：

<table class="control_grid">
    <tr>
        <td align="left" valign="top"><img width="48" height="48" src="icon1.gif" align="left">My text & stuff, overflow??</td>
        <td valign="top"><img width="48" height="48" src="icon1.gif">Icon1</td>
        <td valign="top"><img width="48" height="48" src="icon1.gif">Icon2</td>
        <td></td>
        <td></td>
    </tr>
</table>

Html，table，img＆amp; css - 如何正确包装文本？

4 个答案: