CSS column-count在fire fox和chrome中有不同的行为。

Question

我想像砖头一样展示div。我尝试过使用column-count属性，它在fire fox中工作得很好，但在chrome中却不行。

.container {
   column-count: 3;
   column-gap: 1em;
}
.block {
   width: 100%;
   border: 1px solid;
   display: inline-block;
   text-align: justify;
   margin-bottom: 5px;
}

请参考下面的示例DEMO

我该如何解决这个问题呢？

Answer 1

您需要调整容器：

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

​

Answer 2

.block {}删除内联块。add -webkit-column-count: 3；/* Chrome，Safari，Opera */用于铬支持行。然后将所有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>

​