移动端布局,如何等分这灰色的块呢,我想的是大盒子宽度100%;里边设置33.33%;但是效果不好,请问怎么布局效果最佳呢?
不用百分比的话就试试伸缩盒,网上很多文章 https://.com/a/1190000000484017
flex布局
宽度尽量接近1/3 ,就是把小数点后多写几位:33.333333333%(bootstrap是这么做的)
当然,你还要设置:box-sizing:borer-box;
<style>
*{margin:0;padding:0;}
.main{width:100%;overflow:hidden;}
.main ul{width:102%;}
.main ul li{float:left;border-right:1px solid red;width:33%;text-align:center;height:60px;list-style:none;box-sizing: border-box;}
</style>
<body>
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>