css实现三列等宽等间距排列(九宫格)

Posted 前端精髓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实现三列等宽等间距排列(九宫格)的主要内容,如果未能解决你的问题,请参考以下文章

css实现三列等宽等间距排列(九宫格)

CSS+DIV一行三列(等宽高,有间距)怎么写

用table绘制 等宽等间距的单元

css学习任务一:绘制九宫格

九宫格问题16宫格

Android 手机卫士--九宫格使用