是否可能根据一个元素覆盖另一个元素的div的内容？ [英] Is it possible to wrap the contents of this div based on one element over another?

问题描述

我不确定我是否能正确地说出问题，但我想要完成的是很容易看到的例子。

请查看：

http：// codepen。 io / anon / pen / XKKvBx

我基本上希望看起来像这样：

http://codepen.io/anon/pen/xOOvJB

但是没有给wqrapping div一个固定的宽度。所以基本上我想包装器取图像的宽度，而不是过度扩展的文本。有没有办法做这个？

另外请注意，我不能使用绝对定位，因为图像和文本从数据库通过每次都会不同。 p>

第一个链接的代码：

 < div class =wrapper > 
< img src =https://placekitten.com/300/300> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Etiam ornare dictum ligula quis dictum。 Nam dictum，eros sit amet imperdiet aliquet，ligula nisl blandit lectus，quis malesuada nunc ipsum ac magna。 Vestibulum in magna eu sem suscipit molestie。 Maecenas a ligula molestie，volutpat turpis et，venenatis massa。 Nam aliquam auctor lectus ac lacinia。 Nam consequato lacus porta odio hendrerit mollis。 Etiam at congue est，eu fermentum erat。牧草前庭malesuada ante。 um;;;;;;;;;;;;;;;;;;;; 
< / div> 
 
 .wrapper {
 border：1px solid red; 
 display：inline-block; 
} 
  

第二个链接的代码：

 < div class =wrapper> 
< img src =https://placekitten.com/300/300> 
< p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Etiam ornare dictum ligula quis dictum。 Nam dictum，eros sit amet imperdiet aliquet，ligula nisl blandit lectus，quis malesuada nunc ipsum ac magna。 Vestibulum in magna eu sem suscipit molestie。 Maecenas a ligula molestie，volutpat turpis et，venenatis massa。 Nam aliquam auctor lectus ac lacinia。 Nam consequato lacus porta odio hendrerit mollis。 Etiam at congue est，eu fermentum erat。牧草前庭malesuada ante。 um;;;;;;;;;;;;;;;;;;;; 
< / div> 
 
 .wrapper {
 width：300px; 
 border：1px solid red; 
} 
  

解决方案

方法，如果你强制它 table 和 1％ width img将使用另一个显示属性断开该宽度并将其自己的大小设置为宽度包装：

  .wrapper {border：1px solid red; display：table; width：1％;}  

 < div class =包装器> < img src =https://placekitten.com/300/300> < p> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Etiam ornare dictum ligula quis dictum。 Nam dictum，eros sit amet imperdiet aliquet，ligula nisl blandit lectus，quis malesuada nunc ipsum ac magna。 Vestibulum in magna eu sem suscipit molestie。 Maecenas a ligula molestie，volutpat turpis et，venenatis massa。 Nam aliquam auctor lectus ac lacinia。 Nam consequato lacus porta odio hendrerit mollis。 Etiam at congue est，eu fermentum erat。牧草前庭malesuada ante。 < / div>  

I'm not sure if I was able to word the question correctly but what I'm trying to accomplish is simple to see through example.

Pease take a look at this:

http://codepen.io/anon/pen/XKKvBx

I basically want that to look like this:

http://codepen.io/anon/pen/xOOvJB

But without giving the wqrapping div a fixed width. So basically I'd like the wrapper to take the width of the image and not the overextending text. Is there any way to do this?

Also note I can't use absolute positioning as the image and text coming through from the database will be different each time.

Code from first link:

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

.wrapper {
  border: 1px solid red;
  display: inline-block;
}

Code from second link:

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie. Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

.wrapper {
  width: 300px;
  border: 1px solid red;
}

解决方案

There is one "hacky" way, using another display property for your wrapper, if you force it to be table and 1% width the img will break that width and set his own size as the width wrapper:

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

这篇关于是否可能根据一个元素覆盖另一个元素的div的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！