【发布时间】：2019-10-02 18:47:56
【问题描述】：
我正在尝试将响应式图像和文本链接插入到在线文章中的研讨会页面。
在我看来，我可以将其放入图形标签（包含促销框的样式）中，以便轻松地将其复制并粘贴到多篇文章中。
左侧的图像必须占据图形宽度的 10%，根据浏览器窗口进行缩放。
图片不得浮在下方文字上方。
右侧的文本必须与图像顶部对齐并分成两段，并根据剩余空间进行缩放。
文字不得环绕图片。
图片和文字周围应该有 10px 的边距。
目前我正在使用一个包含两个单元格的表格，但我似乎无法让左侧图像单元格响应缩放，同时缩放图像以 100% 填充单元格。
此外，表格代码看起来很笨拙，过长。
有没有更快更简单的方法来执行此操作？也许使用并排的 div？
预计到达时间
有人建议我应该能够简单地使用 div、float 和 display:inline 来做到这一点，但我找不到方法？
当前代码（自 2019 年 16 月 5 日 12:00 UST 更新）：
<figure style="margin:20px 0px 20px 0px;border-top:1px solid #555555;border-bottom:1px solid #555555;padding:10px 20px 5px 20px;">
<table border="0" cellpadding="0" cellspacing="30">
<tbody>
<tr>
<td style="width: 15%;" valign="top"><a href="https://mutiny.asia/Workshops/Data-Driven-Decision-Making" target="_blank"><img src="https://mutiny.asia/Portals/0/EasyGalleryImages/770/PortfolioPro/Thumbs/51data-driven-decision-making.png" style="width: 100%;"></a></td>
<td style="padding:5px 0 0 10px" valign="top">
<p>This tutorial is part of our Asia Pacific workshop series covering how effective marketing is empowered by data driven decision making.</p>
<p>You can <a href="https://mutiny.asia/Workshops/Data-Driven-Decision-Making" target="_blank">find out more about our Data Driven Decision Making Workshops here</a>.</p>
</td>
</tr>
</tbody>
</table>
</figure>
【问题讨论】：
-
你能关注这个stackoverflow.com/help/how-to-ask并在你的问题中包含一些代码吗？
-
添加了当前表格代码 - 这是我希望用更简单且响应迅速的代码来替换的代码。
-
所以您正在寻找另一种方法来输出与该代码中相同的结构？
-
valign已过时。并且<img>标签不使用或不需要结束斜线。 -
如果 valign 已过时，如何让文本在顶部对齐？ img 上的右斜杠是我的 DNN 编辑器的强制错误
标签： html css image responsive-design