格式图像按表格（HTML）

Question

我试图在https://www.alexcurriemedia.com/video/的HTML表格中获取社交媒体精灵，以便与其上方的图片齐平。无法想出办法做到这一点。

无法在其上方添加另一个表格，因为上方图片是一个wordpress短代码，似乎无法在表格中使用。

以下是代码：

<table><center>[wds id="3"] 
<td nowrap><a href="http://www.facebook.com/alexcurriemedia" target="_blank">
<div class='sprite Facebook1' width="100"></div></a></td>
<td nowrap><a href="http://www.twitter.com/alexcurriemedia" target="_blank">
<div class='sprite Twitter1'></div></a></td>
<td nowrap><a href="http://www.flickr.com/alexcurrie" target="_blank">
<div class='sprite Flickr1'></div></a></td>
<td nowrap><a href="http://www.alexcurriemedia.tumblr.com" target="_blank">
<div class='sprite Tumblr1'></div></a></td>
<td nowrap><a href="http://www.instagram.com/alex.currie" target="_blank">
<div class='sprite Instagram1'></div></a></td><td></td>
</center></table>

非常感谢!!

Answer 1

您看到的迷路<p>标签可能是Wordpress通过文本编辑器自动插入的结果。如果可能的话，您不应在<div>标记内放置<a>。虽然技术上有效，但我发现它会导致Wordpress的文本编辑器等问题。如果你在浏览器中查看源代码，你会发现链接实际上被渲染了两次，如下所示：

<td nowrap=""> <a href="http://www.twitter.com/alexcurriemedia" target="_blank"><p></p> <div class="sprite Twitter1"></div> </a> <p><a href="http://www.twitter.com/alexcurriemedia" target="_blank"></a> </p> </td>

以下代码应该更好用：

<table> <tbody><tr> <td nowrap> <a href="http://www.facebook.com/alexcurriemedia" target="_blank" class="sprite Facebook1"></a> </td> <td nowrap> <a class="sprite Twitter1" href="http://www.twitter.com/alexcurriemedia" target="_blank"></a> </td> <td nowrap> <a class="sprite Flickr1" href="http://www.flickr.com/alexcurrie" target="_blank"></a> </td> <td nowrap> <a class="sprite Tumblr1" href="http://www.alexcurriemedia.tumblr.com" target="_blank"></a> </td> <td nowrap> <a class="sprite Instagram1" href="http://www.instagram.com/alex.currie" target="_blank"></a> </td> </tr> </tbody> </table>

更改后，只需将以下内容添加到CSS中：

.sprite { display: block; }

这会导致每个<td>中的内容在顶部对齐，而不是像当前那样在中心对齐。

如果您仍然无法自动插入<p>标记，则可以查看this function。

最终结果：