Question

我正在尝试制作一个DIV，这个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。

如何让DIV更改其高度以适合较高者（图像或文本），以便两者都适合边框？

感谢。

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

向div添加一个属性

overflow: hidden;

绝对可行。

Answer 3

使用clear: both;添加一些元素到＆＃34;保留＆＃34;浮动元素的空间：

＆＃13;

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

＆＃13;

Answer 4

我会使用clearfix，您可以详细了解here

另外，请注意，没有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>

Answer 5

在div结束之前，即</div>之前，你需要清除浮动。该错误是由于图像的浮动样式。要清除浮动，只需添加此

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

在</div>标记之前。

更改DIV高度以适合图像

5 个答案: