Question

列应填充高度约束。它在Chrome中运行良好，但在IE和Firefox中没有。

在IE和firefox中，它会均匀分布，而不是占据列的高度。我总共有16个子divs，我希望他们进入5 5 5 1.它在chrome（5 5 5 1）中工作正常，而不是firefox和{{1} }（4 4 4 4）

这是我的代码 -

IE

CSS

<div class="example">
    <div class="example-auto">1A</div>
    <div class="example-auto">1B</div>
    <div class="example-auto">1C</div>
    <div class="example-auto">1D</div>
    <div class="example-auto">2A</div>
    <div class="example-auto">2B</div>
    <div class="example-auto">2C</div>
    <div class="example-auto">2D</div>
    <div class="example-auto">3A</div>
    <div class="example-auto">3B</div>
    <div class="example-auto">3C</div>
    <div class="example-auto">3D</div>
    <div class="example-auto">4A</div>
    <div class="example-auto">4A</div>
    <div class="example-auto">4A</div>
    <div class="example-auto">4A</div>
</div>

Answer 1

您需要在提供列的同一个类中提供 column-fill：auto; ：4; 不需要在儿童班上给它。

.example {
  -webkit-columns: 4;
  -moz-columns: 4;
  columns: 4;
    height:100px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 0.5em;
   -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;
}

您可以在此查看示例。 http://jsfiddle.net/VijayDhanvai/0r600sg2/

CSS中的Colomn计数问题

1 个答案: