CSS3 width:min-content对比测试实例页面
回到相关文章 »代码:
CSS代码:
.box {
background-color: #f0f3f9;
padding: 10px;
margin: 10px 0 20px;
overflow: hidden;
}
.inline-block {
display: inline-block;
}
.min-content {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
HTML代码:
<strong>display:inline-block;</strong>
<div class="box inline-block">
<img src="mm1.jpg">
<p>display:inline-block具有收缩特性,但这里宽度随文字。而width:min-content随图片。</p>
</div>
<strong>width: min-content;</strong>
<div class="box min-content">
<img src="mm1.jpg">
<p>display:inline-block具有收缩特性,但这里宽度随文字。而width:min-content随图片。</p>
</div>
效果:
display:inline-block;
width: min-content;
display:inline-block具有收缩特性,但这里宽度随文字。而width:min-content随图片。
display:inline-block具有收缩特性,但这里宽度随文字。而width:min-content随图片。