css实现纵向分列,中间间距相等

方法一:使用网格布局(Grid Layout)

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100px;
      display: grid;
      grid-template-columns: 2fr 1fr 3fr; /* 自定义每一列的比例 */

      /* 将三个行都设置为平均分配剩余空间 */
      /* grid-template-rows: 1fr 1fr 1fr; */
      /* 设置 3 列,并使每列占据相同的比例 */
      /*grid-template-columns: repeat(3, 1fr); */
      gap: 20px; /* 设置列之间的间距 */
    }
    
    .item {
      background-color: #f1f1f1;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
  </div>
</body>
</html>

方法二:使用多列布局(Multi-column Layout)

html 复制代码
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      column-count: 3; /* 设置列数 */
      column-gap: 20px; /* 设置列之间的间距 */
    }
    
    .item {
      background-color: #f1f1f1;
      padding: 20px;
      -webkit-column-break-inside: avoid; /* 防止内容中断到不同列(Webkit 内核浏览器)*/
      page-break-inside: avoid; /* 防止内容中断到不同列(非 Webkit 内核浏览器)*/
      break-inside: avoid; /* 防止内容中断到不同列 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
  </div>
</body>
</html>
相关推荐
Hilaku7 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
拜无忧10 小时前
html,svg,花海扩散效果
前端·css·svg
华仔啊14 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥16 小时前
前端必学的 CSS Grid 布局体系
前端·css
进阶的鱼16 小时前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
石金龙1 天前
[译] Composition in CSS
前端·css
天天扭码1 天前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153171 天前
CSS特异性:如何精准控制样式而不失控?
前端·css
会豪2 天前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy2 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css