html - 如何使 div 成为其中 img 或文本的高度？

Question

抱歉这个菜鸟问题，但我有点卡住了。我有以下代码(我注释掉了一些)，但它没有按预期工作。

目前，class="article"的 div 的高度仅延伸到 class="info"的 div 延伸的高度。但是，我希望它扩展到 class="info"的 div 或图像扩展。换句话说，我希望 class=article 的 div 具有较高的高度:图像或 class="info"的 div。

<div class="article" style="padding-bottom:30px">
      <img src="img.jpg" style="height:70px;width:70px;border-radius:50%;margin-right:10px" align="left">
      <div class="info">Lorem ipsum dolor sit amet, lacus lacinia est tempus. </div>
</div>

抱歉，如果这是一个 super 困惑的解释...如果需要更多说明，请告诉我。

谢谢!

Answer 1

您不应使用 align 属性，因为它在 HTML5 中已弃用。您可以 float 图像，然后应用某种 clearfix。添加了一个 clearfix 类，您可以在任何具有 float 子元素的元素上重复使用该类。

.article {
  background: #eee;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="article clearfix" style="padding-bottom:30px">
  <img src="img.jpg" style="height:70px;width:70px;border-radius:50%;margin-right:10px;float:left;">
  <div class="info">Lorem ipsum dolor sit amet, lacus lacinia est tempus. </div>
</div>