html - 更改 DIV 高度以适合图像

Question

我正在尝试制作一个 DIV，它几乎是一个带边框的框，该边框具有左对齐的图像和位于图像右侧的文本。这是我的设置方式:

    <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 更改其高度以适应较高的(图像或文本)，以便两者都适合边框？

谢谢。

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>