css3中的多列布局columns详解_html/css_WEB-ITnose
columns语法:columns:[ column-width ] || [ column-count ]
设置或检索对象的列数和每列的宽度
其中:[ column-width ]:设置或检索对象每列的宽度;[ column-count ]:设置或检索对象的列数。
css代码:
body{font:14px/1.5 georgia,serif,sans-serif;}p{margin:0;padding:5px 10px;background:#eee;}h1{margin:10px 0;font-size:16px;}.test{ width:628px; border:10px solid #000; -moz-columns:200px 3; -webkit-columns:200px 3; columns:200px 3;}.test2{ border:10px solid #000; -moz-columns:200px; -webkit-columns:200px; columns:200px;}
html代码:
<h1 id="列数及列宽固定">列数及列宽固定:</h1><div class="test"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p></div><h1 id="列宽固定-根据容器宽度液态分布列数">列宽固定,根据容器宽度液态分布列数:</h1><div class="test2"> <p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p> <p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p></div>
结果如图所示:
以下列出column运用的相关属性
1.column-width:
如:-moz-column-width:200px;
2.column-count:
如:-webkit-column-count:3;
3.column-gap:
如:column-gap:normal;column-gap:40px;
4.column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]设置或检索对象的列与列之间的边框。复合属性。相当于border属性
如:column-rule:10px solid #090;
5.column-span:none | all 设置或检索对象元素是否横跨所有列。
如:column-span:all;
6.column-fill:auto | balance 设置或检索对象所有列的高度是否统一。
auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一
如:column-fill:balance;
7.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 设置或检索对象之前是否断行。
auto:既不强迫也不禁止在元素之前断行并产生新列
always:总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列
8.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 设置或检索对象之后是否断行。
auto:既不强迫也不禁止在元素之后断行并产生新列
always:总是在元素之后断行并产生新列
avoid:避免在元素之后断行并产生新列
9.column-break-inside:auto | avoid | avoid-page | avoid-column 设置或检索对象内部是否断行。
auto:既不强迫也不禁止在元素内部断行并产生新列
avoid:避免在元素内部断行并产生新列
其实常用的也就前面5条。

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics



HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special...
