html - 使包装器占用子图像的最大宽度?

标签 html css

<分区>

我不确定我是否能够正确地表达问题,但我想要完成的是简单易懂的示例。

请看这个:

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

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

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

但是没有给 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;
}

最佳答案

有一种“hacky”方式,为您的包装器使用另一个显示属性,如果您将其强制为 table1% 宽度,img 将打破该宽度并将他自己的尺寸设置为宽度包装器:

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}
<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>

关于html - 使包装器占用子图像的最大宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37884416/

相关文章:

iPhone 缩放 : Can't see full website

CSS 边框图像 : rendering a frame by rotating an image

javascript - 如何使用 Javascript 在网页上创建一个列表,其中每个元素都基于模板?

html - 我希望我的标签与我的输入字段垂直对齐

html - 将两个旋转的 div 正确嵌入并定位在矩形的 Angular 上?

javascript - 我想设计一个特定的方形组件。

javascript - 如何使用条件注释在 JS 脚本之间互换

javascript - 根据表单元素的选定值动态更改表单字段标签的技术

javascript - 在部分元素完成加载后捕获事件

php - 如何重新创建此表格效果