将图像对齐div中的文本右侧

Question

我确信这是一个简单的问题，但我无法弄清楚。 我基本上有这个代码

<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>

我希望图像对齐div中文本的右侧。到目前为止，我尝试过的所有内容都将图像从正常的页面流中取出，使div不符合图像的高度。我不能只明确说明div的高度，因为里面的图像是动态的，只有设置宽度。

这是页面的样子。

如何将图像对齐div的右侧，并且div仍然尊重图像的高度。

Answer 1

在css中将div的溢出设置为自动。

div {
  overflow: auto;
}

Answer 2

基本上你的div必须有overflow:hidden，例如：

<div style="overflow:hidden">
    <img style="float:right; width:100px; height:100px"/>
    <div>text text text text text text text text</div>
</div>
<div style="overflow:hidden">
    <img style="float:right; width:100px; height:100px"/>
    <div>text text text text text text text text</div>
</div>

或者，您可以在每个<div style="clear:both"></div>

之后添加div

Answer 3

这是因为图像浮动。为了解决这个问题，您可以在容器元素上使用名为 clearfix 的方法：div.infobox

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

小提琴here。