有没有一种方法可以使用HTML /内联CSS / Markdown在单独的容器中包含图像和内容

Question

但是，如果要在容器的左侧显示图像，则如果内容太短或太长，我必须成比例地调整图像的高度，以防止内容物滑到图像下方。我要在容器中包含Image和内容的原因是为了确保图像在整个页面中保持一致。

我们可以使用HTML /内联CSS / Markdown进行此调整。也许我认为我们可能需要使用Flexbox

我附加了下面的代码，我使用了Grid和一个表，但我不太喜欢它]

<div style=“display:grid; grid-template-columns:auto 1fr”>
<div>
<h1> <img src=“https://image.shutterstock.com/image-vector/sample-stamp-grunge-texture-vector-260nw-1389188336.jpg”
  align=“left”
  hspace=“30"
  width=“100”
  height=“100">
</div>
<div>
  <h3>TITLE</h3>
  Description for Title
  <table>
    <tr>
      <td><strong>BLAH:</strong></td>
      <td style=“padding-left:20px”><p>Updates are made annually or more frequently if needed<p/></td>
    </tr>
    <tr>
      <td style=“vertical-align:top”><strong>Contact Us:</strong></td>
      <td style=“padding-left:20px”>
        <ul style=“padding-left: 15px; margin: 0px”>
          <li style=“padding-bottom: 10px”><a href=“mailto:[email protected]”>Email: Jane Doe</a></li>
          <li><a>Skype: Sample</a></li>
        </ul>
        </br>
      </td>
    </tr>
  </table>
</div>
</div>

-最近图片在左侧，但表格似乎与图片重叠

This is what it currently looks like

Answer 1

编辑2

Answer 2

这里是一个flexbox示例：