使用min-content 制作和图片等宽说明文字
2016-09-14 11:23
330 查看
<!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.csdn.net/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>
使用css 关键字 min-content，使图片和底下的文字一样宽；
若使用 display： inline-block, 上方的文字会塌下来；
<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.csdn.net/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>
使用css 关键字 min-content，使图片和底下的文字一样宽；
若使用 display： inline-block, 上方的文字会塌下来；
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- WP开发加载图片及文字Resource/Content说明
- WP开发加载图片及文字Resource/Content说明
- NGUI使用图片制作文字
- 使用CSS制作文字环绕图片效果（文字内容包含<li>标签）
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图[转贴]
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图（原创）
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 新ALT使用方法，可显示图片、文字有渐隐效果
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 浮动窗口的制作暨CSizingControlBar类的使用说明
- 使用FileUpload控件上传图片并自动生成缩略图、带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 使用FileUpload控件上传图片并自动生成缩略图、带文字和图片的水印图
- [转]使用FileUpload控件上传图片并自动生成缩略图、自动生成带文字和图片的水印图
- 在C＃中，string str = null 与 string str = “” 请尽量使用文字或图象说明其中的区别。