css3中增加了多列布局的属性，什么是多列布局呢？所谓多列布局，就是创建多个列来对文本进行布局，像是报纸的排版差不多，那么，在本文中我们就来看一看多列布局中的一些相关属性及代码实例。
css3多列布局容器的属性：
column-width: auto | < length > ：给列定义一个最小宽度（min-width）。
auto: 列宽由其他元素决定。
length: 显式设置最小宽度。
column-count: auto | < integer >：定义列的数量。
auto: 元素只有一列。就像没有设置一样。
< integer >: 正整数值。取值是大于0的整数，负值无效。
columns: < column-width > || < column-count >：是column-width和column-count的简写。次序随意。
列宽 = （ 父元素宽度 - （列数-1） 列间隙 ） / 列数*
比如：父元素40em，分为4列，列间隙为2em。那么列宽为（ 40 - （4-1） * 2） / 4 = 8.5em。
如果显式设置的列宽小于这个宽度，它会以这个宽度展示。
如果显式设置的列宽大于这个宽度，它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。
column-gap: normal | < length >：定义列间距。值过大时会撑破布局。
normal: 默认值，由浏览器解析，一般是lem。
< length >: 有浮点数字和单位标识符组成的长度值。如：2.1em。
column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >：定义列边框。
它的中心线始终和列间距的中心线一样。换言之，它总处于两列的中间。和border类似。如果列边框大于列间距，并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样（背景效果）。
column-fill: auto | balance：定义多列中每一列的高度是否统一。
这个属性很奇怪。并且在浏览器中不统一。它有两个值：auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的，发现这两个属性并没有区别。在firefox49中测试，这两个属性是有区别的，其中balance是每列高度差不多（对齐），auto就自动合并成一列了，无论自己设置的是多少列。
css3多列布局项目（元素）属性：
column-span: none | all：定义一个元素横跨多少列。
如果我们常将标题横跨所有列。那么，column-span: all。其默认值是，column-span: none；表示不跨列。
css3多列布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多列布局｜column-span</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 40em;
margin:0 auto;
border: 1px solid #ccc;
/*多列布局*/
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-rule: .1em dashed #ccc;
-webkit-column-rule: .1em dashed #ccc;
column-rule: .1em dashed #ccc;
-webkig-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
}
h1 {
font-size: 1.5em;
margin-bottom: 1em;
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
padding-bottom: 5px;
text-align: center;
border-bottom: 2px solid #ccc;
}
p {
margin-bottom: 1em;
text-indent: 2em;
line-height: 1.625;
font-size: .7em;
}
</style>
</head>
<body>
<div>
<h1>为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
<h3>一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
<p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
<h3>二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
<p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
</div>
</body>
</html>
运行效果：
相关文章推荐：
css3-columns多列布局_html/css_WEB-ITnose
Atas ialah kandungan terperinci css3中新增属性：css3多列布局属性的总结（附实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Perbandingan pembekal bentuk statikApr 16, 2025 am 11:20 AMMari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Nota rawak dari meja bulat jamStackApr 16, 2025 am 11:19 AMSaya menganjurkan perbincangan meja bulat Jamstack di Web yang dilepaskan pada hujung minggu lalu. Hanya beberapa nota rawak dari pengalaman itu.
Menggunakan sifat tersuai untuk bertengkar variasi dalam animasi kerangka utamaApr 16, 2025 am 11:18 AMPernahkah anda tertanya -tanya bagaimana untuk menyesuaikan kerangka kunci animasi CSS tanpa menggunakan ciri preprocessor, seperti mixins? Saya terus menjangkau preprocessors untuk
Menggunakan repos template github untuk memulakan projek tapak statikApr 16, 2025 am 11:14 AMSekiranya anda bermula dengan penjana tapak statik, adakah anda tahu anda boleh menggunakan repositori template github untuk memulakan projek baru dengan cepat dan mengurangkan
Statik Pertama: Laman Jamstack Pra-Dihasilkan dengan Rendering Tanpa Pelayan sebagai sandaranApr 16, 2025 am 11:06 AMAnda mungkin melihat istilah Jamstack muncul lebih dan lebih kerap. Saya telah menjadi peminat sebagai pendekatan untuk beberapa waktu.
CSS-Tricks Chronicle XXXVIApr 16, 2025 am 10:58 AMIni adalah salah satu daripada perkara-perkara kecil yang berlaku dengan diri saya, laman web ini, dan laman web lain yang merupakan sebahagian daripada keluarga trik CSS.
Berita platform mingguan: panjang tali emoji, masalah dengan butang bulat, pertukaran yang dibundelApr 16, 2025 am 10:46 AMPada minggu ini, panjang rentetan dua emojis tidak selalu sama, sesuatu yang perlu dipertimbangkan sebelum membuat butang bulat itu, dan kami mungkin mempunyai yang baru
Mesyuarat Graphql di pengadun koktelApr 16, 2025 am 10:43 AMGraphQL dan REST adalah dua spesifikasi yang digunakan semasa membina API untuk laman web untuk digunakan. Rehat mentakrifkan satu siri pengenal unik (URL) yang digunakan aplikasi
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Dreamweaver Mac版
Alat pembangunan web visual
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
