Question

我不确定我是否能够正确地说出问题，但我想要完成的事情很容易通过示例来看。

Pease看看这个：

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

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

另请注意，我不能使用绝对定位，因为每次来自数据库的图像和文本都会有所不同。

第一个链接的代码：

<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;
}

第二个链接的代码：

<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;
}

Answer 1

有一个＆＃34; hacky＆＃34;使用包装器的另一个显示属性，如果强制它为table和1%宽度，img将打破该宽度并将其自己的大小设置为宽度包装器：

＆＃13;

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

＆＃13;

<div class="wrapper">
  <img src="http://www.fillmurray.com/284/196">
  <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>

＆＃13;

Answer 2

无需添加宽度并仍然显示：table-caption在chrome和firefox中工作正常试试这个，

.wrapper {
  border: 1px solid red;
  display: table-caption;
}

Answer 3

编辑：您可以将wrapper设为display: table-caption

＆＃13;

.wrapper {
  border: 1px solid red;
  display: table-caption
}

＆＃13;

<div class="wrapper">
  <img src="https://placehold.it/300x300">
  <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>

<hr />

<div class="wrapper">
  <img src="https://placehold.it/500x500">
  <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>

＆＃13;

使包装器占用子图像的最大宽度？

3 个答案: