CSS3 Columns is a useful columnar layout

CSS provides a style description for the HTML markup language, defining how elements in it are displayed. CSS is a breakthrough in the field of web design. It can be used to modify a small style to update all page elements related to it. There has always been a headache for us in CSS, that is, it is troublesome to create layouts. Of course, there are many ways and techniques to create various layouts, but we always feel that CSS should provide some new properties so that we can better manage layouts. Fortunately, CSS3 provides a batch of new column attributes for creating column layouts. With these attributes, we no longer need to use float, clear, margin and other attributes for control, avoiding a lot of trouble.

CSS code

The column series attributes in CSS3 provide various functions. By using them in combination, you can get any corresponding column layout:

column-count: number of columns

column-gap: width of the gap between each column

column-width: recommended width; may not be used, the browser calculates based on this value

column-rule-width: The width of the dividing line between columns

column-rule-style: The style of the dividing line between columns

column-rule-color: Demonstration of the dividing line between columns

column-span: Allows the width of an element to span multiple columns

column-fill: column arrangement

To create a beautiful column layout, you must at least You need to use column-count and column-gap:

/* 3 columns, 10px spacing between each column*/ul.col-3 {

column-count: 3;
column-gap: 10px;}

If you want to beautify A gap between columns, this is also very simple:

/* 3 columns, 10px spacing between each column, with a golden isolation line*/ul.col-3 {

The element specified by

column-count: 3;
column-gap: 10px;
column-rule: 1px solid #fc0;}

can also span multiple columns:

/* Take the following HTML as an example:

<div>
<h3 id="表头">表头!</h3>
<div>列 1</div>
<div>列 2</div>
<div>列 3</div>
<div>列 4</div>
<div>列 5</div>
<div>列 6</div>
<div>列 7</div>
<div>列 8</div>
<div>列 9</div>
<div>列 10</div>
<div>列 11</div>
<div>列 12</div>
</div>

*/div.col-3 {
column-count: 3;
column-gap: 5px;}div.col-3 h2 {
column-span: all;
text-align:center;
background: #eee;}

It is very simple and the display result is complete Meets our expectations!

Using CSS3 columns to create page layouts has many advantages: you don’t need to calculate the width, and you don’t need to worry about whether the content will break the layout. The system will calculate these mathematical problems for you. Another one is clear and neat semantics.

The above content is about the column creation page layout of css3. I hope it will be helpful to everyone.

Related recommendations:

How to use CSS3 and JS to make a dynamic background of rising blocks

Main functional applications of CSS3

How to make responsive layout with CSS3

The above is the detailed content of CSS3 Columns is a useful columnar layout. For more information, please follow other related articles on the PHP Chinese website!