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

我怎样才能解决这个问题？

来源

2017-09-05 Vimal

您需要弯曲的容器：

.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>

来源

2017-09-05 13:32:08 Stuart

这不是布局改变后'列count'冗余？ –

确实@IlyaStreltsyn – Stuart

.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>

来源

2017-09-06 05:05:19 Dhaarani

@Vimal检查我的答案。如果有任何疑问让我知道。 – Dhaarani

CSS列计数在firefox和chrome中具有不同的行为。

回答

相关问题