【问题标题】:CSS columns don't work with Firefox [duplicate]CSS 列不适用于 Firefox [重复]
【发布时间】:2015-07-16 12:30:06
【问题描述】:

我正在制作一个 Pinterest 样式的网页,但是 columns 属性在 Firefox 中不起作用。

This is the example that I am following,你可以在火狐上试试。

这是相关的 CSS:

#columns {
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

有什么建议吗?

【问题讨论】:

    标签: html css firefox


    【解决方案1】:

    我还不知道为什么,但是 Firefox 不喜欢 -moz-column-fill: auto,删除它并且示例运行良好。 column-fill 的初始值为balance(此处为read more on column-fill

    body > div {
      -moz-column-count: 3;
      -moz-column-gap: 10px;
      /*-moz-column-fill: auto;*/
      -webkit-column-count: 3;
      -webkit-column-gap: 10px;
      -webkit-column-fill: auto;
      column-count: 3;
      column-gap: 15px;
      column-fill: auto;
    }
    body > div > div {
      background: #F00;
      height: 400px;
    }
    body > div > div:nth-child(2n) {
      background: #FF0;
    }
    <div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-01-31
      • 2018-12-13
      • 2023-03-07
      • 1970-01-01
      • 1970-01-01
      • 2018-05-05
      • 2015-02-20
      • 1970-01-01
      相关资源
      最近更新 更多