4

CSS3 で列区切りを制御しようとしていますが、レイアウトに問題があります。

CSS をコンパイルするためのプリプロセッサをあまり使用していません。

私のlessコードは、divに適用される「詳細」と呼ばれるクラスを作成します。

.details {
    .column-count;
    .column-gap(50px);
    .column-rule(1px dotted @bodybackground);
    h3 {
        -webkit-column-span: all;
        -moz-column-span: all;
        column-span: all;
        padding-bottom: 25px;
    }
    h4 {
        &.breakbefore {
            -webkit-break-before: always;
            -moz-break-before: always;
            break-before: always;
        }
        &.breakafter {
            -webkit-break-after: always;
            -moz-break-after: always;
            break-after: always;
        }
    }
    ol li, ul li, table {
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    }
}

ただし、列区切りは機能していないようです。

4

1 に答える 1

3

caniuse.comに記載されているとおり:

部分的なサポートとは、break-before、break-after、break-inside プロパティをサポートしないことを意味します。Webkit ブラウザは、非標準の -webkit-column-break-* プロパティを同等にサポートしています。

IE10 と Opera 12 (新しいレンダリング エンジンに切り替えたときに WebKit にコードを提供してくれることを願うばかりです...) は、より優れたサポートを提供する可能性があります (私はテストしていません)。

Financial Times Labs は、非常に高度なスクリプトであるcolumnflowをリリースしました (使用するには高度すぎるかもしれません)。

  • 構成可能な列幅、ガター、マージン
  • 固定位置要素
  • 列にまたがる要素
  • 列の下部にある見出しを避けるための Keep-with-next クラス
  • 列をまたいでマークされた要素を分割しないようにするラップなしクラス
  • ページへの列のグループ化
  • テキストのベースラインをグリッドに揃えるための標準化された行の高さ
  • フォントサイズ変更時の高速リフロー

または、カラムナイザーが役立つかもしれません

于 2013-03-21T20:28:03.820 に答える