CSS3 multi-column properties

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.

Attributes .
column-fill Specifies how to fill the column

column-gap Specifies the gap between columns column-rule All column-rule- * Abbreviation of attribute

column-rule-color Specifies the color of the border between two columns

column-rule-style Specifies the style of the border between two columns

column-rule- width Specify the thickness of the border between two columns

column-span Specify how many columns the element should span

column-width Specify the width of the column

columns Set column-width and column- Abbreviation for count

Column layout browsers are perfectly compatible

For some browsers that do not support multi-column layout features, such as IE9/IE8, the These attributes are all ignored so that the layout behaves like a traditional monolithic layout.

In order to ensure maximum browser compatibility, when we use multi-column layout attributes, it is best to add the browser engine prefix. The most basic ones are three: Google Chrome's -webkit-, Firefox -moz- in the browser, -ms- in the IE browser, and finally, don’t forget to write it without the prefix.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
          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;
              }
      
       </style>
  </head>
  <body>
    <h1>列数及列宽固定:</h1>
       <div>
              <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>列宽固定，根据容器宽度液态分布列数:</h1>
       <div>
              <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>
  </body> 
</html>

column-count：

<integer> | auto sets or retrieves the column of the object Number

Such as: -webkit-column-count:3;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
           .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
          .columns .column_count{
             -webkit-column-count:3;
             -moz-column-count:3;
          }
      </style>
  </head>
  <body>
    <div>columns-count</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
     </body> 
</html>

##column -gap：

##<length> | normal Sets or retrieves the gap between columns of the object
Such as: column-gap:normal;column-gap:40px;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
       <style>
           .columns{width:300px;}
              .columns .title{margin-bottom:5px; line-height:25px; background:#f0f3f9; text-indent:3px; font-weight:bold; font-size:14px;}
              .columns .column_gap{
                 -webkit-column-count:2;
                 -moz-column-count:2;
                 -webkit-column-gap:40px;
                 -moz-column-gap:40px;
              }
      </style>
  </head>
  <body>
    <div>columns-gap</div>
    <div>
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。   
    </div>
</body> 
</html>

column-rule：

[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ] Sets or retrieves the border between columns of an object. Composite properties. Equivalent to the border attribute
For example: column-rule:10px solid #090;

column-rule-width attribute specifies the border thickness of the two columns:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:outset;
              column-rule-width:10px;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:outset;
              -moz-column-rule-width:10px;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:outset;
              -webkit-column-rule-width:3px;
         }
    </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。
      根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，
      预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>
  </body> 
</html>

## The #column-rule-style attribute specifies the border style between columns:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
     <style>
         .newspaper
         {
              column-count:3;
              column-gap:40px;
              column-rule-style:dashed;
 
              /* Firefox */
              -moz-column-count:3;
              -moz-column-gap:40px;
              -moz-column-rule-style:dashed;
 
              /* Safari and Chrome */
              -webkit-column-count:3;
              -webkit-column-gap:40px;
              -webkit-column-rule-style:dashed;
         }
    
     </style>
  </head>
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。    
    </div>

  </body> 
 
</html>

column-rule-color The attribute specifies the border color of two columns:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
            column-count:3;
            column-gap:40px;
            column-rule-style:outset;
            column-rule-color:blue;
            /* Firefox */
            -moz-column-count:3;
            -moz-column-gap:40px;
            -moz-column-rule-style:outset;
            -moz-column-rule-color:blue;
            /* Safari and Chrome */
            -webkit-column-count:3;
            -webkit-column-gap:40px;
            -webkit-column-rule-style:outset;
            -webkit-column-rule-color:blue;
        }
</style>
  </head> 
  <body>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

Specifies how many columns the element spans

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
   .newspaper
        {
        column-count:4;
        -moz-column-count:4; /* Firefox */
        -webkit-column-count:4; /* Safari and Chrome */
        }
      h3
        {
        column-span:all;
        -webkit-column-span:all; /* Safari and Chrome */
        }
</style>
  </head> 
  <body>
    <h3>最新军事消息</h3>
    <div class="newspaper">
      据俄罗斯《消息报》19日报道称，俄罗斯空军的2架苏-35战斗机近日抵达位于莫斯科近郊的葛罗莫夫试飞院。根据消息，这2架苏-35将用于中国飞行员在俄进行的苏-35飞行培训。俄方曾表示，首批4架苏-35将于年底前交付中国，预计届时在俄罗斯完成培训的中国飞行员将直接驾机回国，而且很可能回国就能形成战斗力。
    </div>
  </body>  
</html>

Specify the width of the column

The column-width attribute specifies the width of the column.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
<style>
      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-column-width:200px;
        -moz-column-count:3;
        -webkit-column-width:200px;
        -webkit-column-count:3;
        column-width:200px;
        column-count:3;
        }
        .test2{
        border:10px solid #000;
        -moz-column-width:200px;
        -webkit-column-width:200px;
        column-width:200px;
        }
        .test3{
        border:10px solid #000;
        -moz-column-count:5;
        -webkit-column-count:5;
        column-count:5;
        }
</style>
</head> 
<body>
      <h1>列数及列宽固定:</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>列宽固定，根据容器宽度液态分布列数:</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>
        <h1>列数固定，根据容器宽度液态分布列宽:</h1>
        <div class="test3">
        <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>
</body>  
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> 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-column-width:200px; -moz-column-count:3; -webkit-column-width:200px; -webkit-column-count:3; column-width:200px; column-count:3; } .test2{ border:10px solid #000; -moz-column-width:200px; -webkit-column-width:200px; column-width:200px; } .test3{ border:10px solid #000; -moz-column-count:5; -webkit-column-count:5; column-count:5; } </style> </head> <body> <h1>列数及列宽固定:</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>列宽固定，根据容器宽度液态分布列数:</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> <h1>列数固定，根据容器宽度液态分布列宽:</h1> <div class="test3"> <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> </body> </html>

submit Reset Code

Automatic operation

CSS3 multi-column properties

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]