本文主要是介绍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>你来了，什么也没有带来，光着身子、空着手就来了！你哭了，预感到一个苦难的历程？当然，你走的时候也是什么都不会带走，甚至是那一副躯壳！你睁开眼晴，看见了一个陌生的世界，不曾有任何事先的约定，你和你的父母、亲人就这样邂逅了。你无从抱怨，你来到的是一个什么样的家庭、地域、气候、时代，那都是大自然的随机分配，没机会石头剪子布。既来之，则安之！如果你已经长到10岁以上（35岁以下），那本文接下来的内容就是为你准备的。你想活出怎样的人生？可能本文会对你有所帮助。至少作者希望是这样的。下面这段，先写给家长吧。如果家长不能看到，孩子自己看看也行，都是一个问题，立场不同，结论可以不一样，大家都自己思考吧，我不替别人下结论。孩子要生了还没生之前，这青年男女有段时间还是很兴奋的，可能孩子出生以后呢，那滋味可不是事先都想到了的。各种问题就来了。我们这里要探讨的成长管理，当然都是和孩子有关的。那么我们分析这些问题呢，就要从孩子出生以后开始。如果你的孩子问你：你为什么要生孩子呢？那你如何回答呢？“我们事先就就知道你这么可爱呀，所有你就来了呀！”。“就是有一天吧哈，哈哈哈，你长大自然就明白了，我们俩吧，未经得住诱惑，就有了你了！”。“要说这事吧，主要你得感谢你爷爷奶奶了，都是他们逼的，不然你恐怕还有等几年！”。“也没有为什么，人都这样，大家都生孩子，也就有了你。”。“意外，其实就是个意外”。无论是哪种情况，父母和孩子都是一场邂逅。就是意外的相遇。在孩子没有来到这个世上之前，互相没有打过招呼，也没有事先进行一场谈判。有的父母抱怨孩子的天赋不够好，立刻就被打脸打回来，现代科学早就证实，孩子的天赋主要是由父母的基因决定的。有的孩子抱怨自己的家庭条件差，这也只能怪他命不好了。假设事情可以事先商量的话，这事会怎么样呢？那孩子肯定要问哪，“你家在几线城市呀？住多大的房子呀？是不是学区房啊？你俩啥学历呀？有多少资产哪？身体健康不？”。这样的话人类就无法延续了。虽然孩子事先没有机会问，但你要做父母之前，的确自己要回答一下这些问题，毕竟这生或不生孩子，对于你来说一定程度上是可控的。很多人生了孩子以后就容易想起“时间都去哪儿了？”。显然，为孩子的付出可能超出了预料。一旦你做了这个决策并产生了结果，就是这里要说的“当你生了孩子”，那你可不能反悔呀！结论是，你不能“让世界充满爱”，但你必须“让家庭充满爱”。父母必须无条地爱自己的孩子，“无论他是出色还是平庸，无论他是漂亮还是丑陋，无论他是健康还是病患，无论他是温柔还是暴躁”。就有人偏偏不是这样的，很多事例，这里就不说了。转身再次面向孩子，我很无耐，人生之不如意十之八九，不可能每一个孩子都那么幸运，总是有的孩子家境没有那么富裕、知性、幸福；没有尽如人意的健康、聪慧、漂亮。“成长管理”是为人父母的职责。对于孩子，如果能够尽早地实现“自我管理”，那就更好了。本小节摘要：岳国军 成长管理 第00章 引言 01 当你来到世间父母和孩子是一场美丽的邂逅。在孩子没有来到这个世上之前，互相没有打过招呼，也没有事先进行一场谈判。父母必须无条地爱自己的孩子，“无论他是出色还是平庸，无论他是漂亮还是丑陋，无论他是健康还是病患，无论他是温柔还是暴躁”。一个年轻的生命，如何走上成长的捷径，这就是本文要努力达成的目标。关键词：孩子、邂逅、“让家庭充满爱”。
</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-count和column-width属性是可选的，但如果只设置其中一个，浏览器将自动计算另一个值。- 列的总数和宽度应该根据内容和视口的尺寸来决定，以确保布局的灵活性和适应性。
- 某些CSS属性，如
float和position，可能与column属性不兼容，因此在设计多列布局时应避免使用这些属性。
通过上述步骤，你可以轻松地在HTML文档中实现多列显示，创建出更加丰富和吸引人的页面布局。
这篇关于html5cssjs代码 037 多列显示的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
