使用min-content 制作和图片等宽说明文字

最新推荐文章于 2025-01-10 09:44:16 发布

JohnnyLiao_WJ

最新推荐文章于 2025-01-10 09:44:16 发布

阅读量521

点赞数

分类专栏： css 文章标签： css min-content

css 专栏收录该内容

12 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用 CSS 的 min-content 关键字来实现图片和其下方文字保持一致宽度的效果。该方法避免了使用 display: inline-block 时可能会遇到的文字布局问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	
		figure{
			width: min-content;
			max-width: 300px; /* 给浏览器一个回退样式 */
			margin: auto;

		}

		figure >img{
			max-width:  inherit;
		}
	</style>
</head>
<body>
	<div >
	<p>	this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo</p>
	<figure class="content">
	<img src="https://img-blog.youkuaiyun.com/20160914112338724?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="sishi">

	<figcaption>this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo this is a photo</figcaption>
	</figure>
 </div>

</body>
</html>