CSS+DIV一行三列（等宽高，有间距）怎么写
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS+DIV一行三列（等宽高，有间距）怎么写相关的知识，希望对你有一定的参考价值。
参考技术A css:#idwidth:100%;height:100%;
#main>div
float:left;width:33.3%;height:33.3%;
line-height:33.3%;text-align:center;
html:
<div id='main'>
<div></div>
<div></div>
<div></div>
</div>
css实现三列等宽等间距排列(九宫格)
float
设置浮动和外间距
每个方块设置左浮动，宽度30%，左外间距2.5%。
100%=(2.5%+30%)+(2.5%+30%)+(2.5%+30%)+2.5%
代码
.item
width: 30%;
margin-left: 2.5%;
margin-bottom: 10px;
background: pink;
height: 100px;
float: left;
<body>
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</body>
width:30%; 表示是父级元素宽度的30%。
flex
display:flex; 将当前元素定义为弹性容器。
.list
margin-top: 20px;
display: flex;
flex-wrap: wrap;
.item
width: 30%;
margin-left: 2.5%;
margin-bottom: 10px;
background: pink;
height: 100px;
<body>
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</body>
使用 flex 布局实现需要注意一个点，就是需要用 flex-wrap 属性来使其换行。
以上是关于CSS+DIV一行三列（等宽高，有间距）怎么写的主要内容，如果未能解决你的问题，请参考以下文章