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

作者：菜鸟追梦旅行 | 2024-03-15 14:56:20

踩

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用 flex 布局实现需要注意一个点，就是需要用 flex-wrap 属性来使其换行。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/242013