CSS3 width:fill-available对比测试实例页面

回到相关文章 »

代码:

CSS代码:
.box {
    width: 70%;
    height: 200px; line-height: 200px;
    padding: 10px; margin: 10px auto;
    background-color: #f0f3f9;
    resize: horizontal;
    overflow: hidden;
}
.fill-available {
    display: inline-block;
    line-height: 20px;
    padding: 20px;
    background-color: #cd0000;
    color: #fff;
    vertical-align: middle;
    
    width: -webkit-fill-available;
    width: -moz-fill-available;
    width: -moz-available;    /* FireFox目前这个生效 */
    width: fill-available;
}
                
HTML代码:
<strong>width: fill-available;</strong>
<div class="box">
    <p class="fill-available">
      width:fill-available可以让元素的宽度表现为默认的block水平元素的尺寸表现。<br>
      但这里实际上是display:inline-block水平的,<br>
      于是,我们可以保证宽度满尺寸自适应的同时使用line-height实现近似的垂直居中效果。
    </p>
</div>
                

效果:

width: fill-available;

width:fill-available可以让元素的宽度表现为默认的block水平元素的尺寸表现。
但这里实际上是display:inline-block水平的,
于是,我们可以保证宽度满尺寸自适应的同时使用line-height实现近似的垂直居中效果。