css div坚持父母

Question

我有以下内容：

<div class="outer">
  <p class="pclass">context...</p>
  <div class="inner">
      <img.../>
  </div>
</div>

内部div宽度因图像宽度而异。

p宽度应取决于图像宽度。

P将包含一些动态文本。问题是如果p的文本大于图像widht，它会跳到图像的顶部。

我试图通过使用css "text-overflow"解决这个问题，但这需要一个宽度。

同样无法正常工作，在img上设置margin：0，希望能让它坚持周围的div。

Answer 1

尝试下面的内容，这样可以简化您的代码。

<div class="outer">
  <p><img src="">context...</p>
</div>

.outer {
    overflow: hidden;
}

.outer img {
    float: right;
    margin: 0 0 20px 20px;
}

如果你真的需要在你的图像周围有一个DIV，你可以在图像周围添加一个DIV并将其设置为具有图像所具有的浮动和边距属性，并将其设置为显示：inline-block例如。

<div class="outer">
  <p><div><img src=""></div>context...</p>
</div>

.outer {
    overflow: hidden;
}

.outer div {
    display: inline-block;
    float: right;
    margin: 0 0 20px 20px;
}