Question

我正在尝试在在线文章中插入响应性图像和文本链接到研讨会页面。

在我看来，我可以将其放入一个图形标签（包含促销框的样式）中，以便轻松地将其复制并粘贴到多篇文章中。

左侧图像必须占据图形宽度的10％，并根据浏览器窗口缩放比例。

图片不得漂浮在下面的文字上。

右侧的文本必须与图像的顶部对齐，并分成两段，以根据剩余空间进行缩放。

文本不得环绕图像。

图片和文字周围应留有10px的空白。

当前我使用的是两个单元格表格，但是我似乎无法使左手图像单元格迅速地缩放，同时缩放图像以填充单元格100％。

表代码似乎也很笨拙，而且过长。

是否有一种更快捷，更简便的方法来执行此操作？也许使用并排div？

ETA

被告知我应该可以简单地使用divs，float和display：inline来做到这一点，但是我找不到办法？

当前代码（自2019年5月16日12:00起更新）：


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

Answer 1

如果希望对象使用其父对象的所有空间，则必须设置100％而不是px。但是，如果图像应始终仅占图形的10％，则为10％。假设该图是img的父对象

如何格式化包含图像和文本的响应式<figure>？

1 个答案: