CSS:九宫格布局

九宫格布局效果如下:

HTML 结构:

html 复制代码
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

公共 CSS:

css 复制代码
.container {
  width: 310px;
}

.item {
  text-align: center;			
  line-height: 100px;
  vertical-align: middle;		/*文字水平垂直居中 */
  width: 100px;
  height: 100px;
  background-color: orange;
}

方法一:float

css 复制代码
.container {
  overflow: auto;		/*形成BFC以解决父元素高度塌陷 */ 
}

.item {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
}
.item:nth-of-type(3n) {			/*最后一列 */			
  margin-right: 0;
}
.item:nth-of-type(n+7) {		/*最后一行 */
  margin-bottom: 0;
}

方法二:flex

css 复制代码
.container {
  display: flex;
  flex-wrap: wrap;		/*换行 */
}
.item {
  margin-right: 5px;
  margin-bottom: 5px;
}
.item:nth-of-type(3n) {					
  margin-right: 0;
}
.item:nth-of-type(n+7) {
  margin-bottom: 0;
}

如果容器和子项的宽都不固定,可以设置 item 样式为 { width: 30%; margin-right: 5%; }

如果子项之前间距固定,可以设置 item 样式为 { width: calc(calc(100% -10px) / 3); margin-right: 5px; }

方法三:grid

css 复制代码
.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 5px;
}

gird 布局不需要额外设置子项的宽高和外边距,如果想要自适应,可以设置 grid-template-columns: repeat(3, 1fr);

相关推荐
2401_8370885011 分钟前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili19 分钟前
用 Tinymce 打造智能写作
前端
angelQ27 分钟前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla34 分钟前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办41 分钟前
js函数声明和函数表达式的理解
前端·javascript·vue.js
云中雾丽44 分钟前
React.forwardRef 实战代码示例
前端
朝歌青年说44 分钟前
一个在多年的技术债项目中写出来的miniHMR热更新工具
前端
Moonbit1 小时前
倒计时 2 天|Meetup 议题已公开,Copilot 月卡等你来拿!
前端·后端
Glink1 小时前
现在开始将Github作为数据库
前端·算法·github
小仙女喂得猪1 小时前
2025 跨平台方案KMP,Flutter,RN之间的一些对比
android·前端·kotlin