CSS列计数在firefox和chrome中具有不同的行为。
问题描述:
我想显示div的砖块。我已经尝试过列数属性,它在火狐中工作正常,但不是在Chrome中。CSS列计数在firefox和chrome中具有不同的行为。
.container {
column-count: 3;
column-gap: 1em;
}
.block {
width: 100%;
border: 1px solid;
display: inline-block;
text-align: justify;
margin-bottom: 5px;
}
请看下面的例子 DEMO
我怎样才能解决这个问题?
答
您需要弯曲的容器:
.container
{
display:flex;
}
会给你你需要的3列,请参阅:
.container {
column-count: 3;
display:flex;
}
.block {
width: 100%;
border: 1px solid;
display: inline-block;
text-align: justify;
margin-bottom: 5px;
padding:10px;
}
<div class="container">
<div class="block">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
<div class="block">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="block">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
答
.block {}删除inline-block的。 add -webkit-column-count:3;/* Chrome,Safari,Opera * /用于Chrome支持专线。然后为所有div设置相等的高度。 (或)使用display flex。
.container {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap:1em;
-moz-column-gap:1em;
column-gap:1em;
}
.block {
width: 100%;
border: 1px solid;
text-align: justify;
margin-bottom: 5px;
}
<div class="container">
<div class="block">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="block">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="block">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
</div>
+0
@Vimal检查我的答案。如果有任何疑问让我知道。 – Dhaarani
这不是布局改变后'列count'冗余? –
确实@IlyaStreltsyn – Stuart