Home >Web Front-end >CSS Tutorial >What is multi-column layout in css3? Introduction to columns attribute (example)
What is multi-column layout in css3? Introduction to columns attribute (example)
- 青灯夜游Original
- 2018-09-11 11:35:353530browse
This chapter will tell you what is multi-column layout in CSS3? The introduction (example) of the columns attribute has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. What is multi-column layout?
The new multi-column layout (multi-column) in CSS3 is a powerful expansion of the block layout mode in traditional HTML web pages. This new syntax allows WEB developers to easily display text in multiple columns. We know that when a line of text is too long, it will be more difficult for readers to read, and they may read the wrong line or read serially; people's eyes move from one end of the text to the other, and then to the beginning of the next line. If the eyeball If the movement is too large, their attention will be reduced and they will easily be unable to read. Therefore, in order to use large-screen displays with maximum efficiency, the page design needs to limit the width of the text and allow the text to be presented in multiple columns, just like the news layout in a newspaper. Example:
2. Introduction and usage of columns attribute
1. Create multiple columns (Number of columns and column width)
No matter how many columns you want a piece of text to display, all you need are two attributes: column-count and column-width.
column-count attribute sets the specific number of columns , for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
.demo{
width: 500px;
height: 100px;
margin: auto;
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
}
</style>
</head>
<body>
<div class="demo">
CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
</div>
</body>
</html>Rendering:
 "153663428352710What is multi-column layout in css3? Introduction to columns attribute (example)")
The column-width property controls the width of the column. If you do not provide a value for the column-count attribute, then the browser decides on its own to divide the text into the appropriate number of columns. Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
.demo{
width: 500px;
height: 100px;
margin: auto;
column-width:100px;
-moz-column-width:100px; /* Firefox */
-webkit-column-width:100px; /* Safari and Chrome */
}
</style>
</head>
<body>
<div class="demo">
CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
</div>
</body>
</html>Rendering:
 "153663454942153What is multi-column layout in css3? Introduction to columns attribute (example)")
2. The gap between columns in multiple columns (column-gap attribute )
column-gap attribute specifies the gap between columns. By default, the width of this gap is 1em, but if you use the column-gap attribute, the default width value will be modified:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
.demo{
width: 500px;
height: 150px;
margin: auto;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>
</head>
<body>
<div class="demo">
CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
</div>
</body>
</html>Rendering:
3. Column border (column-rule attribute)
Usage:
Column-rule: The thickness, color, and style of the border;
The usage of the column-rule attribute is somewhat similar to the usage of the border attribute and can be used in parallel.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
.demo{
width: 500px;
height: 150px;
margin: auto;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-webkit-column-rule: 1px solid #0188FB; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid #0188FB; /* Firefox */
column-rule: 1px solid #0188FB;
}
</style>
</head>
<body>
<div class="demo">
CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
</div>
</body>
</html>Rendering:
##4. Balance of column height## The #CSS3 specification describes that the height of each column is balanced. The browser will automatically adjust how much text is filled in each column and divide the text evenly to keep the height of each column balanced.
However, sometimes, we need to set the maximum height of the column. At this time, the text content will be filled from the first column, then the second column, the third column, and maybe the subsequent columns will not be filled. Maybe it will overflow. Therefore, when the height or max-height attribute value is set for a multi-column layout, the columns will stretch to the specified height - regardless of how much content is there, whether it is enough or exceeds it.
CSS3’s multi-column layout (columns) is a very useful feature that facilitates web front-end developers to efficiently utilize widescreen displays. You'll find them needed in many places, especially where you need to automatically balance column heights.
The above is the detailed content of What is multi-column layout in css3? Introduction to columns attribute (example). For more information, please follow other related articles on the PHP Chinese website!