Question

我正在使用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并没有显示出任何意义。我该如何解决这个问题？

Answer 1

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

Webkit浏览器对非标准-webkit-column-break-*属性具有相同的支持，以实现相同的结果（但只有auto和always值）。 Firefox不支持break-*。

CanIUse - Columns

这几乎说明webkit浏览器（例如iPhone或iPad上的浏览器）对column-break甚至没有部分支持，因此您需要找到一种替代方案，例如使用JavaScript或进行回退CSS。

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

Columnizer jQuery Plugin

Answer 2

长途旅行后，我找到了解决这个问题的方法。我想要实现的是让我的卡看起来像 pinterest 。我使用了Lightweight Responsive Pinterest Layout with jQuery - Waterfall。

CSS3列未显示在IPad和IPhone上

2 个答案: