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);

相关推荐
white-persist10 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师1 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm