CSS CSS多列布局
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS CSS多列布局相关的知识，希望对你有一定的参考价值。
/*= MultiColumns Grid Layout (1-12) */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { float: left; }
.columns1 .col1 { width: 100%; }
.columns2 .col1, .columns2 .col2 { width: 50%; }
.columns3 .col1, .columns3 .col2, .columns3 .col3 { width: 33.3%; }
.columns4 .col1, .columns4 .col2, .columns4 .col3, .columns4 .col4 { width: 25%; }
.columns5 .col1, .columns5 .col2, .columns5 .col3, .columns5 .col4, .columns5 .col5 { width: 20%; }
.columns6 .col1, .columns6 .col2, .columns6 .col3, .columns6 .col4, .columns6 .col5, .columns6 .col6 { width: 16.6%; }
.columns7 .col1, .columns7 .col2, .columns7 .col3, .columns7 .col4, .columns7 .col5, .columns7 .col6, .columns7 .col7 { width: 14.2%; }
.columns8 .col1, .columns8 .col2, .columns8 .col3, .columns8 .col4, .columns8 .col5, .columns8 .col6, .columns8 .col7, .columns8 .col8 { width: 12.5%; }
.columns9 .col1, .columns9 .col2, .columns9 .col3, .columns9 .col4, .columns9 .col5, .columns9 .col6, .columns9 .col7, .columns9 .col8, .columns9 .col9 { width: 11.1%; }
.columns10 .col1, .columns10 .col2, .columns10 .col3, .columns10 .col4, .columns10 .col5, .columns10 .col6, .columns10 .col7, .columns10 .col8, .columns10 .col9, .columns10 .col10 { width: 10%; }
.columns11 .col1, .columns11 .col2, .columns11 .col3, .columns11 .col4, .columns11 .col5, .columns11 .col6, .columns11 .col7, .columns11 .col8, .columns11 .col9, .columns11 .col10, columns11 .col11 { width: 9.0%; }
.columns12 .col1, .columns12 .col2, .columns12 .col3, .columns12 .col4, .columns12 .col5, .columns12 .col6, .columns12 .col7, .columns12 .col8, .columns12 .col9, .columns12 .col10, columns12 .col11, .columns12 .col12 { width: 8.3%; }
/*= For IE */
.columns2 .col2 { *width: 49.9%; }
.columns4 .col4 { *width: 24.9%; }
.columns5 .col5 { *width: 19.9%; }
.columns8 .col8 { *width: 12.4%; }
.columns10 .col10 { *width: 9.9%; }
/*= Columns span */
.columns1 .span1 { width: 100%; }
.columns2 .span1 { width: 50%; *width: 49.9%; }
.columns2 .span2 { width: 100%; }
.columns3 .span1 { width: 33.3%; }
.columns3 .span2 { width: 66.6%; }
.columns3 .span3 { width: 100%; }
.columns4 .span1 { width: 25%; *width: 24.9%; }
.columns4 .span2 { width: 50%; *width: 49.9%; }
.columns4 .span3 { width: 75%; *width: 74.9%; }
.columns4 .span4 { width: 100%; }
.columns5 .span1 { width: 20%; *width: 19.9%; }
.columns5 .span2 { width: 40%; *width: 39.9%; }
.columns5 .span3 { width: 60%; *width: 59.9%; }
.columns5 .span4 { width: 80%; *width: 79.9%; }
.columns5 .span5 { width: 100%; }
.columns6 .span1 { width: 16.6%; }
.columns6 .span2 { width: 33.3%; }
.columns6 .span3 { width: 49.9%; }
.columns6 .span4 { width: 66.6%; }
.columns6 .span5 { width: 83.3%; }
.columns6 .span6 { width: 100%; }
.columns7 .span1 { width: 14.2%; }
.columns7 .span2 { width: 28.5%; }
.columns7 .span3 { width: 42.8%; }
.columns7 .span4 { width: 57.1%; }
.columns7 .span5 { width: 71.4%; }
.columns7 .span6 { width: 85.6%; }
.columns7 .span7 { width: 100%; }
.columns8 .span1 { width: 12.5% *width: 12.4%; }
.columns8 .span2 { width: 25%; *width: 24.9%; }
.columns8 .span3 { width: 37.5%; *width: 37.4%; }
.columns8 .span4 { width: 50%; *width: 49.9%; }
.columns8 .span5 { width: 62.5%; *width: 62.4%; }
.columns8 .span6 { width: 85%; *width: 84.9%; }
.columns8 .span7 { width: 97.5%; *width: 97.4%; }
.columns8 .span8 { width: 100%; }
.columns9 .span1 { width: 11.1%; }
.columns9 .span2 { width: 22.2%; }
.columns9 .span3 { width: 33.3%; }
.columns9 .span4 { width: 44.4%; }
.columns9 .span5 { width: 55.5%; }
.columns9 .span6 { width: 66.6%; }
.columns9 .span7 { width: 77.7%; }
.columns9 .span8 { width: 88.8%; }
.columns9 .span9 { width: 100%; }
.columns10 .span1 { width: 10%; *width: 9.9%; }
.columns10 .span2 { width: 20%; *width: 19.9%; }
.columns10 .span3 { width: 30%; *width: 29.9%; }
.columns10 .span4 { width: 40%; *width: 39.9%; }
.columns10 .span5 { width: 50%; *width: 49.9%; }
.columns10 .span6 { width: 60%; *width: 59.9%; }
.columns10 .span7 { width: 70%; *width: 69.9%; }
.columns10 .span8 { width: 80%; *width: 79.9%; }
.columns10 .span9 { width: 90%; *width: 89.9%; }
.columns10 .span10 { width: 100%; }
.columns11 .span1 { width: 9.0%; }
.columns11 .span2 { width: 18.1%; }
.columns11 .span3 { width: 27.2%; }
.columns11 .span4 { width: 36.3%; }
.columns11 .span5 { width: 45.4%; }
.columns11 .span6 { width: 54.5%; }
.columns11 .span7 { width: 63.6%; }
.columns11 .span8 { width: 73.7%; }
.columns11 .span9 { width: 81.8%; }
.columns11 .span10 { width: 90.9%; }
.columns11 .span11 { width: 100%; }
.columns12 .span1 { width: 8.3%; }
.columns12 .span2 { width: 16.6%; }
.columns12 .span3 { width: 24.9%; }
.columns12 .span4 { width: 33.3%; }
.columns12 .span5 { width: 41.6%; }
.columns12 .span6 { width: 49.9%; }
.columns12 .span7 { width: 58.3%; }
.columns12 .span8 { width: 66.6%; }
.columns12 .span9 { width: 74.9%; }
.columns12 .span10 { width: 83.3%; }
.columns12 .span11 { width: 91.6%; }
.columns12 .span12 { width: 100%; }
/*= multi-columns list (2-12) */
ul.columns2 li, ol.columns2 li, dl.columns2 dd {
float: left;
width: 50%;
*width: 49.9%;
}
ul.columns3 li, ol.columns3 li, dl.columns3 dd {
float: left;
width: 33.3%;
}
ul.columns4 li, ol.columns4 li, dl.columns4 dd {
float: left;
width: 25%;
*width: 24.9%;
}
ul.columns5 li, ol.columns5 li, dl.columns5 dd {
float: left;
width: 20%;
*width: 19.9%;
}
ul.columns6 li, ol.columns6 li, dl.columns6 dd {
float: left;
width: 16.6%;
}
ul.columns7 li, ol.columns7 li, dl.columns7 dd {
float: left;
width: 14.2%;
}
ul.columns8 li, ol.columns8 li, dl.columns8 dd {
float: left;
width: 12.5%;
*width: 12.4%;
}
ul.columns9 li, ol.columns9 li, dl.columns9 dd {
float: left;
width: 11.1%;
}
ul.columns10 li, ol.columns10 li, dl.columns10 dd {
float: left;
width: 10%;
*width: 9.9%;
}
ul.columns11 li, ol.columns11 li, dl.columns11 dd {
float: left;
width: 9.0%;
}
ul.columns12 li, ol.columns12 li, dl.columns12 dd {
float: left;
width: 8.3%;
}
/*= Clear float */
.clearfloat {
display: block;
clear: both;
height: 0;
overflow: hidden;
font: 0/0 sans-serif;
}
.clearfix { zoom: 1; }
.clearfix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
EXAMPLE:
<div class="clearfix columns4 yourClassName">
<div class="cols1 yourClassName1">...</div>
<div class="cols2 yourClassName2">...</div>
<div class="cols3 yourClassName3">...</div>
<div class="cols4 yourClassName4">...</div>
</div>
<div class="columns2 yourClassName">
<div class="cols1 yourClassName1">...</div>
<div class="cols2 yourClassName2">...</div>
<div class="clearfloat"></div>
</div>
<ul class="clearfix columns2">
<li>...</li><li>...</li><li>...</li><li>...</li><li>...</li><li>...</li>
</ul>
<dl class="clearfix columns3">
<dt>...</dt>
<dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd><dd>...</dd>
</dl>以上是关于CSS CSS多列布局的主要内容，如果未能解决你的问题，请参考以下文章