并列商品不等高,交错显示
- css
.menuList_div {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari 和 Chrome */
column-count:2;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 1em;
margin:0 auto;
}
.item {
padding-bottom: 0.1em;
margin-bottom: 1em;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
background: #fff;
border-radius: 5%;
}
.goods-img{
height: 150px;
width: 100%;
border-radius: 5%;
}
p{
margin:0;
padding: 5px;
}
- html
<body style="background: #F0F0F0;">
<div class="menuList_div">
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的女你说的v那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的女你说的v那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的女你说的v那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的女你说的v那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的女标v你是,生的你说的v那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的vv那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
<div class="item">
<img src="./img/touxiang.jpg" class="goods-img"/>
<p>是科比科比的v目标v你是,生的女你说的v那可是女是,生的女你说的v那可是女女蓝色v</p>
<p style="color: #FF4878;">¥990</p>
</div>
</div>
</body>
效果图:
知识点
多列布局详解
-
设置对象的列数和每列的宽度。复合属性。
-
设置对象的宽度;使用像素表示。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轴之上。