输入
0 = 自动。设置宽度后，空间不足时浏览器可能使用比列数设定更少的列。
输出
您的多列布局将显示在这里。
CSS
HTML
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-columns-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-columns-generator` tool (CSS Columns Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-columns-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 多列布局生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS 多列布局可以像报纸一样，把一整块内容分流到多个列中，无需额外的标记。本生成器允许您设置列数、首选列宽、列间距和分隔线，显示实时预览，并提供可复制的 CSS 代码。
使用方法
- 设置列数（1–6），或添加列宽，让浏览器自动决定可以容纳多少列。
- 调整列间距。
- 选择分隔线：样式、宽度和颜色。选择"无"即可去掉分隔线。
- 复制 CSS 和 HTML。
列数与列宽
column-count 用于固定列数。column-width 用于设置理想列宽，让浏览器在空间允许的情况下尽可能多地排列列。同时设置两者时，简写 columns: 200px 3 表示"最多 3 列，每列宽度至少 200px"，这是让布局在小屏幕上优雅收缩的常用写法。
小技巧
- 多列适合长文本。对于卡片网格和页面布局，请改用 CSS Grid，参见 CSS Grid Generator。
- 对于不希望在列之间断开的子元素（如图片），可使用
break-inside: avoid。 - 分隔线本身不占用空间，它位于列间距的中央。
隐私
所有操作都在您的浏览器中完成。您的设置不会被上传。
css columnsmulti column layoutcolumn-countcolumn-gapcolumn-rulenewspaper layouttext columns