html5cssjs代码 037 多列显示

html5&css&js代码 037 多列显示

  • 一、代码
  • 二、解释
    • 1. 设置`column-count`
    • 2. 调整`column-gap`
    • 3. 自定义列宽度
    • 4. 应用到HTML元素
    • 注意事项

在HTML中,要实现多列显示,通常会使用CSS的column属性。这个属性允许你将内容自动分割成多个列,类似于报纸的排版。

一、代码

<!DOCTYPE html>
<html lang = "zh-cn">
<title>CSS多列 编程笔记 html5&css&js</title>
<meta charset = "utf-8"/>
<style>body {color: cyan;background-color: teal;margin: 50px;font-family: "微软雅黑", sans-serif;font-size: 1.8em;}h1 {text-align: center}.newspaper {margin: 50px auto;column-count: 3;}
</style>
<body>
<div class = "newspaper"><h1>青少年成长管理</h1><h2>第一章 引言</h2><h3>01 当你来到世间</h3>你来了,什么也没有带来,光着身子、空着手就来了!你哭了,预感到一个苦难的历程?当然,你走的时候也是什么都不会带走,甚至是那一副躯壳!你睁开眼晴,看见了一个陌生的世界,不曾有任何事先的约定,你和你的父母、亲人就这样邂逅了。。。。。。。
</div>
</body>
</html>

二、解释

在HTML中,要实现多列显示,通常会使用CSS的column属性。这个属性允许你将内容自动分割成多个列,类似于报纸的排版。以下是如何使用column属性来创建多列布局的基本步骤:

1. 设置column-count

通过设置column-count属性,你可以指定内容应该分布到多少列中。例如:

.multi-column {column-count: 3; /* 内容将分为三列 */
}

2. 调整column-gap

column-gap属性用于设置列与列之间的间隙。默认情况下,间隙是正常单词间距的一半。你可以通过设置不同的值来调整间隙,例如:

.multi-column {column-gap: 40px; /* 设置列间隙为40像素 */
}

3. 自定义列宽度

虽然column-width属性不是必须的,但它可以用来指定每列的理想宽度。这个属性通常与column-count一起使用,以便更好地控制布局:

.multi-column {column-width: 200px; /* 设置每列的理想宽度为200像素 */
}

4. 应用到HTML元素

将上述CSS类应用到你想要显示为多列的HTML元素上。例如,你可以将类应用到一个<div>元素:

<div class="multi-column"><p>这里是多列内容。内容将自动填充到指定的列数中,每一列的宽度为200像素,列与列之间的间隙为40像素。</p><!-- 更多内容 -->
</div>

注意事项

  • 多列布局在打印文档中非常有用,但也可以在网页上使用。
  • column-countcolumn-width属性是可选的,但如果只设置其中一个,浏览器将自动计算另一个值。
  • 列的总数和宽度应该根据内容和视口的尺寸来决定,以确保布局的灵活性和适应性。
  • 某些CSS属性,如floatposition,可能与column属性不兼容,因此在设计多列布局时应避免使用这些属性。
    通过上述步骤,你可以轻松地在HTML文档中实现多列显示,创建出更加丰富和吸引人的页面布局。

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

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

相关文章

ExoPlayer架构详解与源码分析(12)——Cache

系列文章目录 ExoPlayer架构详解与源码分析&#xff08;1&#xff09;——前言 ExoPlayer架构详解与源码分析&#xff08;2&#xff09;——Player ExoPlayer架构详解与源码分析&#xff08;3&#xff09;——Timeline ExoPlayer架构详解与源码分析&#xff08;4&#xff09;—…

华为配置AP静态上线业务实验

配置AP静态上线业务示例 组网图形 图1 配置AP静态上线业务示例组网图 业务需求组网需求数据规划配置思路操作步骤配置文件扩展阅读 业务需求 管理员希望为AP配置静态IP地址&#xff0c;使AP能够找到正确的AC&#xff0c;当AP通过AC的认证后&#xff0c;实现AP在AC中正常上…

C++项目——集群聊天服务器项目(四)MySQL数据库

今天来介绍集群聊天器项目中MySQL数据库的相关表结构 集群聊天服务器项目需要进行好友、群组的增删操作以及好友离线状态的判断&#xff0c;需要在数据库中建立相关表进行增删改查操作&#xff0c;因此项目设计了如下五个表&#xff0c;大家可以自己动动小手&#xff0c;使用S…

机器学习——元学习

元学习&#xff08;Meta Learning&#xff09;是一种机器学习方法&#xff0c;旨在使模型能够学习如何学习。它涉及到在学习过程中自动化地学习和优化学习算法或模型的能力。元学习的目标是使模型能够从有限的训练样本中快速适应新任务或新环境。 在传统的机器学习中&#xff…

海外媒体宣发:十大国外中文网站-大舍传媒

十大国外中文网站 1、欧洲时报 覆盖欧洲且较具影响力的华文媒体 国外中文新闻网站&#xff0c;欧洲时报文化传媒集团旗舰日报《欧洲时报》旗下官方网站&#xff0c;总部设在法国巴黎&#xff0c;创刊于1983年&#xff0c;现已成为唯一发行覆盖全欧、发行量最大、最具影响力的华…

ic到底还能不能入了?

不管你同意与否&#xff0c;这是我目前的观点&#xff1a; IC行业的高薪只要一天不降&#xff0c;对于普通家庭的孩子来说就是一个值得进入的行业。 但它的入行门槛只会越来越高直到达到一个高点并维持住。之前可能是科班硕士就能找到工作&#xff0c;现在就需要28所起步才可…

发展规划--IM系统

1、时代背景 5G应用&#xff0c;多终端应用&#xff0c;物联网应用&#xff0c;小程序&#xff0c;工业互联&#xff0c;大数据应用等等大前端时代的到来&#xff0c;程序员不能只关注crud&#xff0c;因为以后的服务并发量只会越来越多。 高并发架构师、大数据架构师或者说j…

数据结构-双向链表-003

1双向链表 1.1链表结点结构体定义 typedef struct student_data {char name[32];char sex;int age; }STU_DATA;typedef struct double_link_node {STU_DATA data;//数据域struct double_link_node *ppre;//指向上一个结点的指针struct double_link_node *pnext;//指向下一个结…

国内ip地址怎么改?详解修改ip地址的步骤

在网络通信中&#xff0c;IP地址是设备在网络上的标识&#xff0c;对于用户、服务器和网络安全都至关重要。然而&#xff0c;有时候在特定情况下&#xff0c;可能需要修改IP地址以满足不同需求或解决特定问题。虎观代理小二将深入研究中国国内IP地址修改的方法与影响&#xff0…

【算法】堆排序

1. 堆排序简介 堆排序(heapsort)是由 J. W. J. Williams 于 1964 年发明的。是一种基于比较的排序算法,和选择排序一样,堆排序将数据序列分为已排序区域和未排序区域两部分。通过从未排列区域中获取最大元素并将其插入已排序区域,迭代这个操作来缩小未排序区域。与选择排…

2024年华为OD机试真题-二叉树的广度优先遍历-Python-OD统一考试(C卷)

题目描述: 有一棵二叉树,每个节点由一个大写字母标识(最多26个节点)。现有两组字母,分别表示后序遍历(左孩子->右孩子->父节点)和中序遍历(左孩子->父节点->右孩子)的结果,请输出层次遍历的结果。 输入描述: 输入为两个字符串,分别是二叉树的后续遍历和…

LeetCode第三天(645. 错误的集合)

集合 s 包含从 1 到 n 的整数。不幸的是&#xff0c;因为数据错误&#xff0c;导致集合里面某一个数字复制了成了集合里面的另外一个数字的值&#xff0c;导致集合 丢失了一个数字 并且 有一个数字重复 。 给定一个数组 nums 代表了集合 S 发生错误后的结果。 请你找出重复出…

npm install jsencrypt爆错

报错: npm install jsencrypt npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.org/jsencrypt failed, reason: certificate has expired npm ERR! A complete log of this run can be found in: C:\Users…

C++ explicit隐式类型转换

单参数构造函数支持隐式类型的转换 什么意思&#xff1f; 简单来理解就是&#xff1a; 一个类对象的构造函数的参数只有一个&#xff0c;就可以直接进行赋值传参 例如构造函数的参数为int&#xff0c;且只有一个int 就可以直接将int类型的整型数据转换成类对象 也就是说从int类…

Unity构建详解(3)——SBP的依赖计算

【前置知识】 先要搞清楚Asset和Object的关系&#xff0c;可以简单理解为一个Asset对应多个Object。 unity自定义的Asset也要有一个存储的标准&#xff0c;其采用的是YAML&#xff0c;我们看到的所有Unity自定义的Asset格式&#xff0c;例如.prefab&#xff08;预制体&#x…

研华工控机610L学习笔记2:visualstudio与第一个C#程序

今日继续学习工控机 C# 编程相关知识&#xff1a; 这篇结束后我将先进行一段时间的C#的学习研究&#xff0c;并写一些C#的笔记 后续再更新工控机编程设计相关 目录 1、安装visualstudio&#xff1a; 2、创建第一个C#程序&#xff1a; 3、寻找C#解决方案源文件&#xff1a; …

linux之zabbix自定义监控

zabbix基本配置见&#xff1a;写文章-CSDN创作中心https://mp.csdn.net/mp_blog/creation/editor/136783672 自定义监控规则 命令为who | wc -l 显示为2&#xff0c;主机一个&#xff0c;mobaxterm一个&#xff0c;思路是开启3个终端&#xff0c;让主机的zabbix服务自动检测1…

B端设计:如何让UI组件库成为助力,而不是阻力。

首发2023-09-24 15:42贝格前端工场 Hi&#xff0c;我是大千UI工场&#xff0c;网上的UI组件库琳琅满目&#xff0c;比如elementUI、antdesign、iview等等&#xff0c;甚至很多前端框架&#xff0c;也出了很多UI组件&#xff0c;如若依、Layui、bootstrap等等&#xff0c;作为U…

I/O多路复用:select/poll/epoll

最基本的 Socket 模型 要想客户端和服务器能在网络中通信&#xff0c;那必须得使用 Socket 编程&#xff0c;它是进程间通信里比较特别的方式&#xff0c;特别之处在于它是可以跨主机间通信。 Socket 的中文名叫作插口&#xff0c;咋一看还挺迷惑的。事实上&#xff0c;双方要…

基于SpringBoot图书进销存管理系统

采用技术 基于SpringBoot图书进销存管理系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 用户信息管理 图书类型管理 商品退货管理 客户信息管理 图…