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

前端精髓

2024-07-07 帮助3人

学新通

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实现三列等宽等间距排列(九宫格)

float

flex

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

TikTok加速器哪个好免费的TK加速器推荐

《学习通》视频自动暂停处理方法

excel图片置于文字下方的方法

Android 11 保存文件到外部存储，并分享文件

微信提示登录环境异常是什么意思原因

微信运动停用后别人还能看到步数吗

微信人名旁边有个图标有什么用