CSS 实现将多个卡片分成两列显示

复制代码
<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
</div>

使用Grid网格布局

复制代码
.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.card {
  background-color: #f0f0f0;
  padding: 10px;
}

(多列则将 repeat(2,1fr) ,2 替换成想显示的列数)

使用Flex弹性布局

复制代码
.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 50%;
  box-sizing: border-box;
  padding: 10px;
}

使用浮动布局

html 复制代码
.card-container {
  width: 100%;
  overflow: hidden;
}

.card {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
  background-color: #f0f0f0;
}
相关推荐
哎呦你好6 分钟前
【CSS】Grid 布局基础知识及实例展示
开发语言·前端·css·css3
盛夏绽放15 分钟前
接口验证机制在Token认证中的关键作用与优化实践
前端·node.js·有问必答
zhangxingchao31 分钟前
Jetpack Compose 之 Modifier(中)
前端
JarvanMo31 分钟前
理解 Flutter 中 GoRouter 的context.push与context.go
前端
pe7er37 分钟前
使用 Vue 官方脚手架创建项目时遇到 Node 18 报错问题的排查与解决
前端·javascript·vue.js
星始流年41 分钟前
前端视角下认识AI Agent
前端·agent·ai编程
pe7er44 分钟前
使用 types / typings 实现全局 TypeScript 类型定义,无需 import/export
前端·javascript·vue.js
CH_Qing1 小时前
【udev】关于/dev 设备节点的生成 &udev
linux·前端·网络
小诸葛的博客1 小时前
gin如何返回html
前端·html·gin
islandzzzz1 小时前
(第二篇)HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html