css - css div stick to parent

Question

I have the following:

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

The inner div width is different depending on the image width.

The p width should depend on the image width.

P will contain some dynamic text. The problem is that if p's text is bigger than image widht, it jumps on top of the image.

I've tried to get around this by using css "text-overflow", but that needs a width.

Also not working, setting margin:0 on the img, hoping to make it stick to the surounding 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;
}