CSS multi-column layout implementation method Daquan

Summary:

Multi-column layouts are often seen in web applications, sharing more than 4 columns of layout today.

Display:table

The code is as follows:

<style>
. Table {
Width:auto;
min-width:1000px;
margin:0 Auto;
padding:0;
display:table;
}
. TableRow {
Display:table-row;
}
. TableCell {
border:1px solid red;
Display:table-cell;
width:33%;
}
</style>
<div class= "Table" >
<div class= "TableRow" >
<div class= "TableCell" >
One
</div>
<div class= "TableCell" >
Two
</div>
<div class= "TableCell" >
Three
</div>
</div>
</div>

Float

The code is as follows:

<style>
. Row {
Float:left;
width:33%;
border:1px solid red;
}
</style>
<div class= "Row" >
One
</div>
<div class= "Row" >
Two
</div>
<div class= "Row" >
Three
</div>

Display:inline-block

The code is as follows:

<style>
. Row {
Display:inline-block;
width:32%;
border:1px solid red;
}
</style>
<div class= "Row" >
One
</div>
<div class= "Row" >
Two
</div>
<div class= "Row" >
Three
</div>

Column-count

The code is as follows:

<style>
. column {
/* Set the number of columns * *
-moz-column-count:3; * * Firefox *
-webkit-column-count:3; * Safari and Chrome * *
Column-count:3;
/* Set the spacing between columns * *
-moz-column-gap:40px; * * Firefox *
-webkit-column-gap:40px; * Safari and Chrome * *
column-gap:40px;
/* Set the rules between columns * *
-moz-column-rule:4px outset #ff0000; * * Firefox *
-webkit-column-rule:4px outset #ff0000; * Safari and Chrome * *
column-rule:4px outset #ff0000;
}
</style>
<div class= "column" ></div>

Summary:

The above code is tested on the chrome, if used please pay attention to compatibility, there are any questions you can ask