html - 使用 CSS 将多个图像 (.gif) 用作图标，而不是背景，插入到不同的行中？

Question

我必须创建一个表格，其中包含有关电视节目广播的信息，例如时间表。

所以我的第一行是时间栏(1PM | 1:30 | 2PM ...)，左边的栏(行)是 channel :

急症室ABCFAM Assets 管理公司澳大利亚国家石油公司英国广播公司[等...大约有 20 个。]

在每个 channel 名称之前必须有一个图标 [gif 格式]，这个图标表示数字。

所以我这样做了:

HTML:

<th scope="row"><img src="images/53.gif" alt="" class="channel-number">WPGH</th> 

CSS:

.channel-number {
width: 12px;
height: 12px;
float: left;
padding-left: 2px;
padding-right: 2px;
 }

但是，我想知道是否有更简单的方法使用 CSS 来完成此操作。这个图标不是背景图片，它更像是“内容”，我有 20 个这样的小 gif。我必须在 CSS 中做什么才能让它们显示在右侧，而 channel 名称显示在左侧？

这是我正在处理的一个非常但非常长且复杂的表格，这是我似乎根本无法正确处理的一项功能。我将不胜感激任何意见。

Answer 1

如果图标被认为是内容，那么它应该在 html 中。并不是因为它是图形化的，所以它必须 在 css 中处理。当然，图像的布局应该在那里完成。

要使图像位于文本右侧，只需将其 float 到右侧而不是左侧

float:right

它将保留在表格单元格内。也可以使用绝对定位强制靠右，不影响 channel 名称的显示。

另一件事:利用您的 alt 属性。您可以使用图形来显示程式化数字 53，但为了屏幕阅读器、机器人、文本浏览器等，您确实需要将 alt 设置为 53。

找出一个有意义的 alt 属性可能很困难，但在这种情况下它很容易:)

<th scope="row"><img src="images/53.gif" alt="53" class="channel-number">WPGH</th>