css div 坚持父级

Question

我有以下内容:

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

内部div宽度根据图片宽度不同

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

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

我试图通过使用 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 并将其设置为具有图像所具有的 float 和边距属性，并将其设置为显示: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;
}