弹性盒子之wap端布局

时间：2024-03-26 18:02:50

发现移动端用弹性盒子布局起来更加的方便，box-flex:val;特别是图文展示的时候，如下面的

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,user-scalable=no">

        <title></title>

    </head>

    <body>

        <div class="row">

            <div class="col" style="position: relative;display: -webkit-box;width: 100%;">

                <div style="-webkit-box-flex:1;box-flex:1">

                    <div class="" style="padding-top: 100%;position: relative;"><a><img style="width:100%;height:100%;position: absolute;top:0px;left:0px" src="html5/img/vacation2.png"/></a></div>

                </div>

                <div class="" style="-webkit-box-flex:2;box-flex:1;position: relative;"></div>

            </div>

        </div>

    </body>

</html>

省去你手动给百分比而且还有计算，这里图片也是方形的，移动端有一个好处就是宽度不用定义，直接等于device-width！而且这里图片外层用了一个padding-top：100%；这里是个技巧哦！如何你没有发现，你可以自己去体验一样，就可以发现这个padding-top用到的巧妙之处

相关文章