1

我正在使用 CSS3 列

.Content {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}
.List {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 0px;
    -moz-column-gap: 0px;
    column-gap: 0px;
    display: block !important;
}

我的 html 看起来像这样。

<div class="col-lg-12 col-md-12 col-xs-12 col-sm-12 List">
  <div class="Content col-lg-12 col-md-12 col-sm-12 col-xs-12">
     My content
  </div>
</div>

我通过 Chrome 开发工具检查了我的 iPad 和 iPhone 显示，它工作正常。但是，真正的 iPad 和 iPhone 没有显示任何内容。我该如何解决这个问题？

4

2 回答 2

1

使用前缀的非完全支持浏览器-webkit-有一些无法使用的缺失元素。

Webkit 浏览器确实具有对非标准-webkit-column-break-*属性的等效支持以实现相同的结果（但只有autoandalways值）。火狐不支持break-*。

CanIUse - 列

这几乎表明 webkit 浏览器（例如 iPhone 或 iPad 上的浏览​​器）甚至没有部分支持column-break，因此您需要找到替代方案，例如使用 JavaScript 或在 CSS 中具有后备功能。

Columnizer 是一个很好的 jQuery 插件，它可以创建相同的效果，但使用 JavaScript。

分柱器 jQuery 插件

于 2015-12-29T13:33:29.953 回答
0

经过长途跋涉，我找到了解决这个问题的方法。我想要实现的是让我的卡片看起来像pinterest。我使用轻量级响应式 Pinterest 布局和 jQuery - Waterfall。

于 2016-01-02T07:32:11.120 回答