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随图片。