将DIV高度更改为适应图像

Question

Text to the right of the image

    <div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
        <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
        Here is some text.
    </div>

问题在于，如果图像比文本更高，周围的DIV（因此包括边框）会自动调整大小以适应所有文本所需的高度，但图像会溢出DIV。

我该如何使DIV更改其高度以适应更高的那个（图像或文本），以便两者都适合边框中？

谢谢。

- Leon Overweel

---

你能否发布一个带有问题的JSFiddle？CSS/HTML - Stefan

问题在于该div中的img元素被浮动了。这个链接可能会有用：https://dev59.com/23VC5IYBdhLWcg3wqzHV - Marcelo

你正在尝试清除一个浮动。我建议在谷歌上搜索这个术语，有几种解决方案。 - Joseph Marikle

Answer 1

将display: inline-block添加到您的div中。

<div style="padding:1%; border-style:solid; border-size:1px; width:100%;display: inline-block">
    <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
    Here is some text.
</div>

- mikelt21

---

谢谢@mikelt21！它生成一个块级元素框，与周围的内容一起流动。 - Kunj

Answer 2

添加一个属性

overflow: hidden;

肯定会起作用。

- Swapnil Motewar

Answer 3

在需要为浮动元素“保留”空间时，可以添加带有 clear: both; 的元素：

<div style="padding:1%; border-style:solid; border-size:1px; width:100%;">
    <img src="http://i.imgur.com/FwgZFNn.jpg" style="float:left; max-width:30%; max-height:200px;" />
    Here is some text.

    <div style="clear: both;"></div>

</div>

- Justinas

---

有方法可以在不包含空的div的情况下完成这个任务。维护一个带有数十个内联样式的空div的项目是很烦人的，祝你好运。 - Steve Sanders

@SteveSanders 是的，有的。就像自清除的 div 一样。但这个更简单易懂，作为起点使用也更方便。 - Justinas

Answer 4

在 </div> 结束标签之前，你需要清除浮动。这个错误是由图片的浮动样式引起的。为了清除浮动，请添加以下内容。

<span style="clear:both;"></span>

在 </div> 标签之前。

- monk

Answer 5

我会使用 clearfix，您可以在此处了解更多信息。

另外，请注意，没有 border-size 属性，您尝试做的应该是 border-width。

这只是我的个人意见，最好的实践方法是不要使用内联样式。

这样您就有一个干净的解决方案。

因此，请查看下面的代码片段：

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
  clear: both
}
div {
  padding: 1%;
  border: 1px solid #000;
  width: 100%;
}
div > img {
  float: left;
  max-width: 30%;
  max-height: 200px;
}

<div class="clearfix">
  <img src="http://i.imgur.com/FwgZFNn.jpg" />Here is some text.
</div>

- dippas

---

谢谢！我没有使用内联样式，但是我正在处理很多其他CSS，所以我认为把所有东西都发布出来可能会过于详细；因此，我只拿了相关部分并将其作为内联样式。 - Leon Overweel

顺便提一下，通过使用clearfix类，您可以将该类应用于项目中可能存在此类问题的所有容器，而无需创建额外的HTML。 - dippas