弹性盒子之wap端布局

最新推荐文章于 2022-09-06 15:22:08 发布

akfrrf0060

最新推荐文章于 2022-09-06 15:22:08 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/liangxiblog/p/5682055.html

版权

发现移动端用弹性盒子布局起来更加的方便，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>