关于移动端布局问题。

吾曾今愛看武俠劇

发布于
2016-05-19

更新于
2016-05-19

移动端布局，如何等分这灰色的块呢，我想的是大盒子宽度100%；里边设置33.33%；但是效果不好，请问怎么布局效果最佳呢？

图片描述

阅读 3.1k

3 个回答

星星星星

发布于
2016-05-19

✓ 已被采纳

<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>

发布于
2016-05-19

更新于
2016-05-19

flex布局
宽度尽量接近1/3 ,就是把小数点后多写几位：33.333333333%（bootstrap是这么做的）

当然，你还要设置：box-sizing:borer-box;

发布于
2016-05-19

不用百分比的话就试试伸缩盒，网上很多文章 https://segmentfault.com/a/1190000000484017

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题