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

我有下面的代码;然而它没有给我想要的结果 - 我所追求的是根据下面的图片，我做错了什么？Html，table，img＆css - 如何让文本正确包装？

<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

来源

2010-06-08 Michael Pasqualone

您应该浮动图像。

float：left;

来源

2010-06-08 09:37:19

这个+表格布局似乎是最干净的方法，谢谢！ – 2010-06-08 09:49:55

@Michael Pasqualone：的确如此。 – ANeves 2010-06-08 09:56:11

一件事你已经错过了，关闭这样的img标签（不要忘了ALT ATTR :)）

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

以上代码符合xhtml标准

来源

2010-06-08 09:33:47

哎呦！谢谢，我也有ALT标签和东西 - 只是试图让准系统定位正确。 CSS正在做我的头！ – 2010-06-08 09:35:16

尝试添加以下CSS：

table { table-layout: fixed; }

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

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

来源

2010-06-08 09:37:56

不完全正确：'table-layout：fixed;'只考虑第一行而不是像往常一样计算列宽。请参阅http://www.htmldog.com/reference/cssproperties/table-layout/需要浮动图像以使文本环绕它们。 – ANeves 2010-06-08 09:53:57

使用这样的所需输出：

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

来源

2010-06-08 09:42:54 Karthik

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

回答

相关问题