发现移动端用弹性盒子布局起来更加的方便,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; 100%;"> <div style="-webkit-box-flex:1;box-flex:1"> <div class="" style="padding-top: 100%;position: relative;"><a><img style="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用到的巧妙之处