严重怀疑楼主是布局问题,象这样的布局甚至都不用@media媒体查询都能搞定,代码如下:
div class='cont'ullidiv class='inner'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div/lilidiv class='inner'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div/li lidiv class='inner'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div/li /ul /divstyle .cont{margin:20px 10px;} ul {margin:0px;padding:0px;list-sytle:none;} li{width:33.333333%;}.inner{margin:0 12px;}.cimg{width:100%;margin-bottom:12px;} /style上面是在不使用flex,box-sizing属性的时候最标准的三列实现模型,可以兼容任何屏幕宽度的浏览器,包括手机和电脑。
如果楼主只需要手机端的先是那么可以用box-sizing:border-box这个属性使得div等的宽度包括边框和padding值,flex可以实现等分为几列,代码如下:
.cont{display:-moz-box; /* Firefox */display:-webkit-box; /* Safari and Chrome */display:box;width:300px;border:1px solid black;}.fx{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari and Chrome */box-flex:1.0;border:1px solid red;box-sizing:border-box;padding:0 12px; }/stylediv class='cont'div class='fx'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/divdiv class='fx'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/divdiv class='fx'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div /div这样的话父元素定义display:box,然后子元素定义box-flex:1,就可以实现三个div各占1份的宽度比例。当然这个属性IE是不支持的,IE11都不支持,所以只能适合手机端使用。这段代码可以在chrome下测试
取消
评论