如何使用 CSS 实现多列布局，有哪些注意事项

大白话如何使用 CSS 实现多列布局，有哪些注意事项？

嘿，你是不是想在网页上搞个多列布局，让页面看起来更有层次感、更丰富？那用 CSS 来实现多列布局就再合适不过啦！下面我就给你详细说说咋用 CSS 实现多列布局，还有其中的一些注意事项。

1. 使用 column-count 属性

这个属性超简单，就是直接指定你要把内容分成几列。咱来看个例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多列布局示例</title><style>/* 选择所有的 .multi-columns 类元素 */.multi-columns {/* 设置列数为 3，也就是把内容分成 3 列 */column-count: 3;/* 列与列之间的间距为 20 像素 */column-gap: 20px;/* 列与列之间的分隔线样式，这里是 1 像素宽的实线，颜色为灰色 */column-rule: 1px solid #ccc;}</style>
</head><body><!-- 创建一个具有 .multi-columns 类的 div 元素 --><div class="multi-columns"><!-- 这里是要显示的内容，会被自动分成 3 列 -->这里是一大段文本内容，会被自动分成三列显示。这里是一大段文本内容，会被自动分成三列显示。这里是一大段文本内容，会被自动分成三列显示。这里是一大段文本内容，会被自动分成三列显示。这里是一大段文本内容，会被自动分成三列显示。</div>
</body></html>

在这个例子里，我们通过 column-count 属性把 .multi-columns 类元素里的内容分成了 3 列。column-gap 用来设置列与列之间的间距，column-rule 则是给列之间加上了分隔线。

2. 使用 column-width 属性

这个属性是指定每列的宽度，浏览器会根据这个宽度自动计算列数。看代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>多列布局示例</title><style>/* 选择所有的 .multi-columns-width 类元素 */.multi-columns-width {/* 设置每列的宽度为 200 像素 */column-width: 200px;/* 列与列之间的间距为 20 像素 */column-gap: 20px;/* 列与列之间的分隔线样式，这里是 1 像素宽的实线，颜色为灰色 */column-rule: 1px solid #ccc;}</style>
</head><body><!-- 创建一个具有 .multi-columns-width 类的 div 元素 --><div class="multi-columns-width"><!-- 这里是要显示的内容，会根据列宽自动分成多列 -->这里是一大段文本内容，会根据列宽自动分成多列显示。这里是一大段文本内容，会根据列宽自动分成多列显示。这里是一大段文本内容，会根据列宽自动分成多列显示。这里是一大段文本内容，会根据列宽自动分成多列显示。这里是一大段文本内容，会根据列宽自动分成多列显示。</div>
</body></html>

在这个例子中，column-width 被设置成了 200 像素，浏览器就会根据这个宽度和容器的宽度来自动计算能分成几列。

注意事项

  • 内容分割：使用多列布局时，内容会被自动分割到不同的列中。如果你的内容里有图片或者其他块状元素，可能会出现分割得不太好看的情况。你可以用 break-inside: avoid; 来避免元素被分割：
img {/* 避免图片被分割到不同的列 */break-inside: avoid;
}
  • 响应式设计：在不同的设备上，多列布局可能会显示得不太一样。你可以结合媒体查询来调整列数或者列宽，让布局在各种设备上都好看：
/* 当屏幕宽度小于 600 像素时，把列数改成 1 */
@media (max-width: 600px) {.multi-columns {column-count: 1;}
}
  • 浏览器兼容性：虽然大多数现代浏览器都支持多列布局，但还是有些老版本的浏览器可能不支持。你可以加上浏览器前缀来提高兼容性：
.multi-columns {-webkit-column-count: 3; /* Safari 和 Chrome */-moz-column-count: 3; /* Firefox */column-count: 3;
}

现在你应该对如何用 CSS 实现多列布局，还有其中的注意事项有个清晰的了解了吧！赶紧动手试试，让你的网页变得更酷炫！

除了column-count，还有哪些属性可以实现多列布局？

除了 column-count 之外，CSS 里还有不少属性和方法能够实现多列布局。下面我会为你详细介绍：

1. column-width 属性

column-width 用于指定每列的理想宽度，浏览器会依据容器宽度和指定的列宽来自动计算列数。

.multi-columns {/* 指定每列理想宽度为 200px */column-width: 200px; /* 列间距为 20px */column-gap: 20px; /* 列之间分隔线样式 */column-rule: 1px solid #ccc; 
}

在上面的代码里，设置了每列理想宽度为 200px，浏览器会根据容器的实际宽度来算出合适的列数。

2. flexbox 布局

Flexbox 是一种强大的布局模型，借助 display: flex 或者 display: inline-flex 可以创建多列布局。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox 多列布局</title><style>.flex-container {/* 设置为 flex 容器 */display: flex; /* 子元素超出容器时换行 */flex-wrap: wrap; /* 子元素之间的间距为 10px */gap: 10px; }.flex-item {/* 每个子元素占据宽度的三分之一减去间距 */flex: 1 0 calc(33.33% - 10px); }</style>
</head><body><div class="flex-container"><div class="flex-item">内容 1</div><div class="flex-item">内容 2</div><div class="flex-item">内容 3</div><div class="flex-item">内容 4</div><div class="flex-item">内容 5</div><div class="flex-item">内容 6</div></div>
</body></html>

在这个例子中，display: flex 把 .flex-container 变成了一个弹性容器，flex-wrap: wrap 让子元素在一行放不下时自动换行，flex 属性定义了每个子元素的伸缩性和初始大小。

3. grid 布局

CSS Grid 布局提供了二维网格系统，能轻松创建多列布局。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Grid 多列布局</title><style>.grid-container {/* 设置为网格容器 */display: grid; /* 创建三列，每列宽度为 1fr */grid-template-columns: repeat(3, 1fr); /* 行间距和列间距都为 10px */gap: 10px; }</style>
</head><body><div class="grid-container"><div>内容 1</div><div>内容 2</div><div>内容 3</div><div>内容 4</div><div>内容 5</div><div>内容 6</div></div>
</body></html>

在上述代码中，display: grid 将 .grid-container 变为网格容器，grid-template-columns 定义了网格的列结构，这里使用 repeat(3, 1fr) 创建了三列，每列宽度相等。

4. float 属性

float 属性过去常被用于创建多列布局，通过让元素向左或向右浮动来实现。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Float 多列布局</title><style>.float-column {/* 元素向左浮动 */float: left; /* 每个列宽度为 33.33% */width: 33.33%; /* 内边距为 10px */padding: 10px; /* 计算宽度时包含内边距和边框 */box-sizing: border-box; }/* 清除浮动 */.clearfix::after {content: "";display: table;clear: both;}</style>
</head><body><div class="clearfix"><div class="float-column">内容 1</div><div class="float-column">内容 2</div><div class="float-column">内容 3</div></div>
</body></html>

在这个例子中，float: left 使 .float-column 元素向左浮动，width: 33.33% 让每个元素占据三分之一的宽度。同时，使用 clearfix 类来清除浮动，避免布局塌陷。

如何使用flexbox布局实现多列布局？

Flexbox（弹性盒布局模型）是一种强大的CSS布局方案，它能轻松实现多列布局。以下将详细介绍使用Flexbox实现多列布局的步骤和方法，并给出不同场景下的示例代码。

基本原理

要使用Flexbox实现多列布局，需先将父元素设为Flex容器，然后通过设置子元素的属性来控制它们的排列方式。主要用到的属性有：

  • display: flex或display: inline-flex：把元素变为Flex容器。
  • flex-wrap：控制子元素在一行排不下时是否换行。
  • flex-basis、flex-grow和flex-shrink：定义子元素的初始大小、伸缩性。

示例代码

等宽多列布局

以下代码可实现等宽的三列布局：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox 等宽多列布局</title><style>.flex-container {/* 将元素设置为 Flex 容器 */display: flex;/* 子元素超出容器宽度时换行 */flex-wrap: wrap;/* 子元素之间的间距为 10px */gap: 10px;}.flex-item {/* 子元素的初始大小为 0，允许放大，不允许缩小 */flex: 1 0 0;}</style>
</head><body><div class="flex-container"><div class="flex-item">内容 1</div><div class="flex-item">内容 2</div><div class="flex-item">内容 3</div></div>
</body></html>
自定义列宽布局

若要实现不同宽度的列布局，可调整flex-basis属性：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox 自定义列宽布局</title><style>.flex-container {display: flex;flex-wrap: wrap;gap: 10px;}.flex-item-1 {/* 第一个子元素初始大小为 20%，允许放大，不允许缩小 */flex: 1 0 20%;}.flex-item-2 {/* 第二个子元素初始大小为 60%，允许放大，不允许缩小 */flex: 1 0 60%;}.flex-item-3 {/* 第三个子元素初始大小为 20%，允许放大，不允许缩小 */flex: 1 0 20%;}</style>
</head><body><div class="flex-container"><div class="flex-item-1">内容 1</div><div class="flex-item-2">内容 2</div><div class="flex-item-3">内容 3</div></div>
</body></html>

注意事项

  • 浏览器兼容性：大多数现代浏览器都支持Flexbox布局，但旧版本浏览器可能存在兼容性问题。可通过浏览器前缀（如-webkit-、-moz-）来提高兼容性。
  • flex属性缩写：flex属性是flex-grow、flex-shrink和flex-basis的缩写，合理使用缩写能简化代码。
  • 响应式设计：结合媒体查询，可根据不同屏幕尺寸调整列数和列宽，实现响应式布局。例如：
@media (max-width: 768px) {.flex-item {flex: 1 0 100%;}
}

此代码表示在屏幕宽度小于768px时，每个子元素将独占一行。

flexbox布局和grid布局的区别是什么？

Flexbox布局和Grid布局都是CSS中强大的布局工具，它们都可以用来创建灵活的页面布局，但在设计目的、维度控制、子项定位、响应式设计等方面存在明显的区别，以下为你详细介绍：

设计目的

  • Flexbox布局：它是一维布局模型，主要为了实现一维方向上的布局，比如水平方向或者垂直方向的元素排列。像导航栏、按钮组等只需在一个方向上布局的场景，使用Flexbox就非常合适。
  • Grid布局：属于二维布局模型，着重解决二维空间的布局问题，能够同时在行和列两个方向上对元素进行精准定位和排列。适合用于创建复杂的网格状布局，例如网页的整体布局、图片展示网格等。

维度控制

  • Flexbox布局：侧重于单一方向的布局控制。通过flex-direction属性可以设置主轴方向，如row（水平方向从左到右）、column（垂直方向从上到下）等，但同一时间主要处理一个方向上的元素排列。
.flex-container {display: flex;/* 设置主轴方向为水平方向 */flex-direction: row; 
}
  • Grid布局：可以同时在行和列两个维度上进行布局。使用grid-template-columns和grid-template-rows属性分别定义列和行的大小和数量。
.grid-container {display: grid;/* 定义两列，每列宽度为 1fr */grid-template-columns: 1fr 1fr; /* 定义两行，每行高度为 100px */grid-template-rows: 100px 100px; 
}

子项定位

  • Flexbox布局：子项的定位和排列主要依赖于主轴和交叉轴。通过justify-content控制主轴上的对齐方式，align-items控制交叉轴上的对齐方式。但子项的位置相对比较依赖于排列顺序，难以进行精确的二维定位。
.flex-container {display: flex;/* 主轴上子项居中对齐 */justify-content: center; /* 交叉轴上子项居中对齐 */align-items: center; 
}
  • Grid布局：子项可以通过网格线进行精确的二维定位。可以使用grid-row和grid-column属性指定子项在网格中的具体位置。
.grid-item {/* 从第 1 行网格线开始，到第 2 行网格线结束 */grid-row: 1 / 2; /* 从第 2 列网格线开始，到第 3 列网格线结束 */grid-column: 2 / 3; 
}

响应式设计

  • Flexbox布局：在响应式设计中，通常通过调整flex-basis、flex-wrap等属性来实现元素的自适应排列。比如在小屏幕下让元素换行显示。
@media (max-width: 768px) {.flex-container {/* 元素换行显示 */flex-wrap: wrap; }.flex-item {/* 子项宽度为 100% */flex-basis: 100%; }
}
  • Grid布局：响应式设计更加灵活，可以通过grid-template-columns的repeat()函数结合minmax()函数实现自适应的列宽。还可以使用媒体查询完全改变网格的结构。
.grid-container {display: grid;/* 自适应列宽，每列最小宽度为 200px，最大宽度为 1fr */grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
}

空间分配

  • Flexbox布局：空间分配主要基于子项的flex-grow、flex-shrink和flex-basis属性。flex-grow决定子项在有多余空间时的放大比例，flex-shrink决定子项在空间不足时的缩小比例，flex-basis定义子项的初始大小。
.flex-item {/* 子项初始大小为 200px，允许放大，允许缩小 */flex: 1 1 200px; 
}
  • Grid布局：空间分配基于网格轨道（行和列）的定义。可以使用fr单位来按比例分配空间，也可以使用固定值（如px、em等）。
.grid-container {display: grid;/* 第一列宽度为 200px，第二列宽度占剩余空间的 1 份 */grid-template-columns: 200px 1fr; 
}

综上所述，Flexbox布局适合一维方向上的简单布局，而Grid布局更适合复杂的二维网格布局。在实际开发中，可以根据具体的布局需求选择合适的布局方式，甚至可以将两者结合使用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/41411.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

26考研——查找_树形查找_二叉排序树（BST）（7）

26考研——查找_树形查找_二叉排序树（BST）（7）

408答疑 文章目录 三、树形查找二叉排序树&#xff08;BST&#xff09;二叉排序树中结点值之间的关系二叉树形查找二叉排序树的查找过程示例 向二叉排序树中插入结点插入过程示例 构造二叉排序树的过程构造示例 二叉排序树中删除结点的操作情况一&#xff1a;被删除结点是叶结点…
阅读更多...
C++异常处理完全指南：从原理到实战

C++异常处理完全指南：从原理到实战

文章目录 异常的基本概念基本异常抛出与捕获多类型异常捕获异常重新抛出异常安全异常规范&#xff08;noexcept&#xff09;栈展开与析构标准库异常总结 异常的基本概念 异常是程序运行时发生的非预期事件&#xff08;如除零、内存不足&#xff09;。C通过try、catch和throw提…
阅读更多...
汽车方向盘开关功能测试的技术解析

汽车方向盘开关功能测试的技术解析

随着汽车智能化与电动化的发展&#xff0c;方向盘开关的功能日益复杂化&#xff0c;从传统的灯光、雨刷控制到智能语音、自动驾驶辅助等功能的集成&#xff0c;对开关的可靠性、耐久性及安全性提出了更高要求。本文结合北京沃华慧通测控技术有限公司&#xff08;以下简称“慧通…
阅读更多...
matplotlib——南丁格尔玫瑰

matplotlib——南丁格尔玫瑰

南丁格尔玫瑰图&#xff08;Nightingale Rose Chart&#xff09;&#xff0c;是一种特殊形式的柱状图&#xff0c;它以南丁格尔&#xff08;Florence Nightingale&#xff09;命名&#xff0c;她在1858年首次使用这种图表来展示战争期间士兵死亡原因的数据。 它将数据绘制在极坐…
阅读更多...
【大模型基础_毛玉仁】4.4 低秩适配方法

【大模型基础_毛玉仁】4.4 低秩适配方法

目录 4.4 低秩适配方法4.4.1 LoRA1&#xff09;方法实现2&#xff09;参数效率 4.4.2 LoRA 变体1&#xff09;打破低秩瓶颈&#xff08;例ReLoRA&#xff09;2&#xff09;动态秩分配&#xff08;例AdaLoRA&#xff09;3&#xff09;训练过程优化&#xff08;例DoRA&#xff09…
阅读更多...
融合YOLO11与行为树的人机协作智能框架：动态工效学优化与自适应安全决策

融合YOLO11与行为树的人机协作智能框架：动态工效学优化与自适应安全决策

人工智能技术要真正发挥其价值&#xff0c;必须与生产生活深度融合&#xff0c;为产业发展和人类生活带来实际效益。近年来&#xff0c;基于深度学习的机器视觉技术在工业自动化领域取得了显著进展&#xff0c;其中YOLO&#xff08;You Only Look Once&#xff09;算法作为一种…
阅读更多...
Java为什么要使用线程池？

Java为什么要使用线程池？

前言1.对线程的管理更加的规范化2.降低创建线程和销毁线程的开销 前言 之前对于Java线程池的理解&#xff0c;一直停留在&#xff1a;对于Java中的多线程机制来说&#xff0c;如果不使用线程池的话&#xff0c;线程的使用就会变得杂乱无章。这一步。一直没有深入去理解为什么其…
阅读更多...
告别分库分表，时序数据库 TDengine 解锁燃气监控新可能

告别分库分表，时序数据库 TDengine 解锁燃气监控新可能

达成效果&#xff1a; 从 MySQL 迁移至 TDengine 后&#xff0c;设备数据自动分片&#xff0c;运维更简单。 列式存储可减少 50% 的存储占用&#xff0c;单服务器即可支撑全量业务。 毫秒级漏气报警响应时间控制在 500ms 以内&#xff0c;提升应急管理效率。 新架构支持未来…
阅读更多...
TDengine 3.3.2.0 集群报错 Post “http://buildkitsandbox:6041/rest/sql“

TDengine 3.3.2.0 集群报错 Post “http://buildkitsandbox:6041/rest/sql“

原因&#xff1a; 初始化时处于内网环境下&#xff0c;Post “http://buildkitsandbox:6041/rest/sql“ 无法访问 修复&#xff1a; vi /etc/hosts将buildkitsandbox映射为本机节点 外网环境下初始化时没有该问题
阅读更多...
【Linux】POSIX信号量与基于环形队列的生产消费者模型

【Linux】POSIX信号量与基于环形队列的生产消费者模型

目录 一、POSIX信号量&#xff1a; 接口&#xff1a; 二、基于环形队列的生产消费者模型 环形队列&#xff1a; 单生产单消费实现代码&#xff1a; RingQueue.hpp&#xff1a; main.cc&#xff1a; 多生产多消费实现代码&#xff1a; RingQueue.hpp&#xff1a; main.…
阅读更多...
【13】Ajax爬取案例实战

【13】Ajax爬取案例实战

目录 一、准备工作 二、爬取目标 三、初步探索&#xff1a;如何判断网页是经js渲染过的&#xff1f; 四、爬取列表页 4.1 分析Ajax接口逻辑 4.2 观察响应的数据 4.3 代码实现 &#xff08;1&#xff09;导入库 &#xff08;2&#xff09;定义一个通用的爬取方法…
阅读更多...
嵌入式八股RTOS与Linux---网络系统篇

嵌入式八股RTOS与Linux---网络系统篇

前言 关于计网的什么TCP三次握手 几层模型啊TCP报文啥的不在这里讲,会单独分成一个计算机网络模块   这里主要介绍介绍lwip和socket FreeRTOS下的网络接口–移植LWIP 实际上FreeRTOS并不自带网络接口,我们一般会通过移植lwip协议栈让FreeRTOS可以通过网络接口收发数据,具体可…
阅读更多...
全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练

全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练

全分辨率免ROOT懒人精灵-自动化编程思维-设计思路-实战训练 1.2025新版懒人精灵-实战红果搜索关键词刷视频&#xff1a;https://www.bilibili.com/video/BV1eK9kY7EWV 2.懒人精灵-全分辨率节点识别&#xff08;红果看广告领金币小实战&#xff09;&#xff1a;https://www.bili…
阅读更多...
【更新中】【React】基础版React + Redux实现教程(Vite + React + Redux + TypeScript)

【更新中】【React】基础版React + Redux实现教程(Vite + React + Redux + TypeScript)

本项目是一个在react中&#xff0c;使用 redux 管理状态的基础版实现教程&#xff0c;用简单的案例练习redux的使用&#xff0c;旨在帮助学习 redux 的状态管理机制&#xff0c;包括 store、action、reducer、dispatch 等核心概念。 项目地址&#xff1a;https://github.com/Yv…
阅读更多...
【MySQL】从零开始：掌握MySQL数据库的核心概念（四）

【MySQL】从零开始：掌握MySQL数据库的核心概念（四）

人们之所以不愿改变&#xff0c;是因为害怕未知。但历史唯一不变的事实&#xff0c;就是一切都会改变。 前言 这是我自己学习mysql数据库的第四篇博客总结。后期我会继续把mysql数据库学习笔记开源至博客上。 上一期笔记是关于mysql数据库的表格约束&#xff0c;没看的同学可以…
阅读更多...
AP 场景架构设计（一） ：OceanBase 读写分离策略解析

AP 场景架构设计（一） ：OceanBase 读写分离策略解析

说明&#xff1a;本文内容对应的是 OceanBase 社区版&#xff0c;架构部分不涉及企业版的仲裁副本功能。OceanBase社区版和企业版的能力区别详见&#xff1a; 官网链接。 概述​ 当两种类型的业务共同运行在同一个数据库集群上时&#xff0c;这对数据库的配置等条件提出了较高…
阅读更多...
CPU架构和微架构

CPU架构和微架构

CPU架构&#xff08;CPU Architecture&#xff09; CPU架构是指处理器的整体设计框架&#xff0c;定义了处理器的指令集、寄存器、内存管理方式等。它是处理器设计的顶层规范&#xff0c;决定了软件如何与硬件交互。 主要特点&#xff1a; 指令集架构&#xff08;ISA, Instr…
阅读更多...
6.4 模拟专题：LeetCode1419.数青蛙

6.4 模拟专题：LeetCode1419.数青蛙

1.题目链接&#xff1a;数青蛙 - LeetCode 2.题目描述 给定一个字符串 croakOfFrogs&#xff0c;表示青蛙的鸣叫声序列。每个青蛙必须按顺序发出完整的 “croak” 字符&#xff0c;且多只青蛙可以同时鸣叫。要求计算最少需要多少只青蛙才能完成该字符串&#xff0c;若无法完成…
阅读更多...
Linux 搭建dns主域解析，和反向解析

Linux 搭建dns主域解析，和反向解析

#!/bin/bash # DNS主域名服务 # user li 20250325# 检查当前用户是否为root用户 # 因为配置DNS服务通常需要较高的权限&#xff0c;只有root用户才能进行一些关键操作 if [ "$USER" ! "root" ]; then# 如果不是root用户&#xff0c;输出错误信息echo "…
阅读更多...
Leetcode 二进制求和

Leetcode 二进制求和

java solution class Solution {public String addBinary(String a, String b) {StringBuilder result new StringBuilder();//首先设置2个指针, 从右往左处理int i a.length() - 1;int j b.length() - 1;int carry 0; //设置进位标志位//从2个字符串的末尾向前遍历while(…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023