CSS3仿淘寶兩列錯位展示商品
研究了一陣子了，發現個好東西，給大家分享下！
直接上個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<style>
@media screen and (max-width: 800px) {
.masonry {
column-count: 2; // two columns on larger phones
}
}
.masonry {
column-count: 1; // two columns on larger phones
}
}
.masonry {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
width: 90%;
margin:2em auto;
}
.item {
padding: 1em;
margin-bottom: 2em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #f60;
}
</style>
<body>
<div class="masonry">
<div class="item">
<div class="item_content content-lar"> 1
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
</div>
</div>
<div class="item">
<div class="item_content content-sma"> 2
</div>
</div>
<div class="item">
<div class="item_content content-mid"> 3
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
</div>
</div>
<div class="item">
<div class="item_content content-sma"> 4
</div>
</div>
<div class="item">
<div class="item_content content-mid"> 5
</div>
</div>
<div class="item">
<div class="item_content content-lar"> 6
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
lkjasdfjafja崑崙劍法撒旦撒髮卡機<br>
</div>
</div>
<div class="item">
<div class="item_content content-sma"> 7
</div>
</div>
<div class="item">
<div class="item_content content-lar"> 8
</div>
</div>
<div class="item">
<div class="item_content content-lar"> 9
</div>
</div>
<div class="item">
<div class="item_content content-sma"> 10
</div>
</div>
<div class="item">
<div class="item_content content-mid"> 11
</div>
</div>
<div class="item">
<div class="item_content content-mid"> 12
</div>
</div>
<!-- more items -->
</div>
</body>
</html>
---------------------
這個可以實現如下的效果：
多列布局詳解
-
設定物件的列數和每列的寬度。複合屬性。
-
設定物件的寬度；使用畫素表示。auto：根據 <’ column-count '> 自定分配寬度
-
column-count： | auto 用來定義物件中的列數，使用數字 1-10表示。
auto：根據 <’ column-width '> 自定分配寬度 -
column-gap: normal || length， normal是預設值，為1em， length 是用來設定列與列之間的間距。
-
column-rule：<’ column-rule-width ‘> || <’ column-rule-style ‘> || <’ column-rule-color '>
設定物件的列與列之間的邊框。複合屬性 -
column-fill：auto | balance
設定物件所有列的高度是否統一;
auto： 列高度自適應內容;
balance： 所有列的高度以其中最高的一列統一 -
column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設定物件之前是否斷行;
auto： 既不強迫也不禁止在元素之前斷行併產生新列;
always： 總是在元素之前斷行併產生新列
avoid：避免在元素之前斷行併產生新列 -
column-break-after：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
設定物件之後是否斷行 -
column-break-inside：auto | avoid | avoid-page | avoid-column
設定物件內部是否斷行;
auto：既不強迫也不禁止在元素內部斷行併產生新列;
avoid：避免在元素內部斷行併產生新列
column-span: none（預設值）|| all，none是不跨越任何列。all 是元素跨越所有列，並定位在列的Z軸之上。