首页 > web前端 > css教程 > 正文

如何使包装 Div 流畅地匹配子图像的宽度?

Linda Hamilton
发布: 2024-11-24 19:59:53
原创
322 人浏览过

How to Make a Wrapper Div Fluidly Match the Width of a Child Image?

如何确保 Wrapper Div 适应子图像的宽度

问题:如何配置一个包装 div,采用子图像的最大宽度,同时确保 div 的宽度保持不变流体?

解决方案:

一种非常规的方法是将包装器 div 的显示属性设置为“table”,并将其宽度设置为“1%”。通过这样做,图像超出了包装器的宽度限制,并在包装​​器上断言其自己的大小。

.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>
登录后复制

此解决方法允许 div 动态地将自身塑造为图像的宽度,即使 div 的宽度未明确设置。

以上是如何使包装 Div 流畅地匹配子图像的宽度?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板