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-*プロパティを同等にサポートしています (ただし、autoとのalways値のみ)。Firefox はサポートしていませんbreak-*。

CanIUse - 列

これは、Webkit ブラウザー (iPhone や iPad のブラウザーなど) が部分的にさえサポートしていないことを示しているため、JavaScript を使用するか、CSS でフォ​​ールバックするcolumn-breakなどの代替手段を見つける必要があります。

Columnizer は、同じ効果を生み出す優れた jQuery プラグインですが、JavaScript を使用します。

カラムナイザー jQuery プラグイン

于 2015-12-29T13:33:29.953 に答える
0

長い旅をした後、この問題の解決策を見つけました。私が達成したいのは、私のカードをpinterestのように見せることでした。そして、jQuery - Waterfall で軽量レスポンシブ Pinterest レイアウトを使用しました。

于 2016-01-02T07:32:11.120 に答える