CSS中的列数问题

Posted 2023-03-06

【中文标题】CSS中的列数问题

【英文标题】：Issue with Colomn count in CSS

【发布时间】：2015-12-27 18:34:08

【问题描述】：

列应填充高度限制。它在 Chrome 中运行良好，但在 IE 和 Firefox 中运行良好。

在IE 和firefox 中，它是均匀分布的，而不是采用列的高度。我总共有 16 个子 divs，我希望他们进来 5 5 5 1。它在 chrome (5 5 5 1) 中工作正常，而不是在 firefox 和 IE (4 4 4 4)

这是我的代码 -

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

CSS

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


.example-auto 
  -webkit-column-fill: auto;
  -moz-column-fill: auto;
  column-fill: auto;

【参考方案1】：

您需要在提供 columns: 4; 的同一类中提供 column-fill: auto; 不需要在子类中给出。

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