css3 multi-column layout

The new multi-column layout in CSS3 is a powerful extension 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 may read the wrong line or read the serial; people’s point of view moves from one end of the text to the other and then to the beginning of the next line. If the movement is too large, their attention will be diminished and it is easy to read. Therefore, in order to use large-screen displays with maximum efficiency, the page design needs to limit the width of the text so that the text is presented in multiple columns, just like the news layout in a newspaper

1. Common attributes

1. column-count: the specific number of attribute setting columns
2. column-width: attribute controls the width of the column
3. column-gap: gap between two columns
4. column-rule: specify the width, style and color between columns
5. column-span: Specify how many columns the element should span (n: specify span n columns all: span all columns)

2. The usage of multiple columns

<style>
    *{
    
    
        padding: 0;
        margin: 0;
    }
    .wrapper{
    
    
        width:1054px;
        padding:20px;
        margin:0 auto;
        font-family: "微软雅黑",Arial;
        /*设置以几列的方式显示*/
        column-count:2;
        /*指定列宽*/
        column-width:500px;
        /*指定列与列之间的间距*/
        column-gap: 50px;
        /*指定列与列之间间隙的样式*/
        /*column-rule:2px dotted red*/
        /*相对应下面的三个属性*/
        column-rule-color:red;
        column-rule-style:dotted;
        column-rule-width:2px;
    }
    .wrapper > h4{
    
    
        column-span: all;
    }
</style>

3. The balance of column height:

If you 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

max-height: 300px;

Web front-end communication QQ group: 327814892