<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>column分欄</title>
<style>
div{
width: auto;
margin-bottom:30px;
padding: 10px;
outline: 2px solid #ff04bb;
}
div.count {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
/*指定欄目數量為3欄，則會根據元素的寬度變化來液态分布三欄的寬度。——還是響應式的奧*/
div.width{
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
/*每一欄的寬度都是150px.根據總寬度液态配置設定欄目之間的距離*/
div.gap{
/*-webkit-column-count: 3;*/
/*-moz-column-count: 3;*/
/*column-count: 3;*/
-webkit-column-gap:50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule: 4px solid #a3cfff;
-moz-column-rule: 4px solid #a3cfff;
column-rule: 4px solid #a3cfff;
div.columns{
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
</style>
</head>
<body>
<h1>column-count:隻指定欄目數量進行液态分欄，自動分布欄目寬度和欄距</h1>
<div class="count">
每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。每一個下拉菜單，都需要額外操作才能顯示其中的選項。如果某個選擇對使用者來說必不可少，那麼最好不用下拉菜單，直接把選項列出來讓使用者選擇。下拉菜單可以用在那些可預測、不需要學習成本的地方（比如日期、省份等），偶爾還能用在一些需要反複操作的地方（比如操作菜單）。總之，謹慎使用下拉菜單，重要選擇最好不要使用下拉菜單。
</div>
<hr/>
<h1>column-width:隻指定每一欄的欄目寬度，根據元素寬度來液态進行分欄，決定分出欄目的數量和欄距。以達到每一欄的均衡相等。</h1>
<div class="width">
<h1>column-gap:指定欄目間的距離是多少，必須配合column-count或column-width其中一個；同樣液态配置設定欄目數量或欄目寬度。看你配合使用的是誰了。</h1>
<div class="gap">
<h1>column-rule指定欄距間的分割線，用法同border，需要指定：1px solid #顔色；</h1>
<div>-webkit-column-rule: 4px solid #a3cfff;
-moz-column-rule: 4px solid #a3cfff;
column-rule: 4px solid #a3cfff;</div>
<h1>column-fill:指定或檢索各列是否高度統一</h1>
<div>-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance（所有列的高度以其中最高的一列統一）;
auto:表示列高度自适應内容
<h1>columns:簡寫模式： column-width | column-count </h1>
<div>-webkit-columns: width count;
-moz-columns:-;
columns:-；
<div class="columns">
</body>
</html>