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;
}
}
ただし、列区切りは機能していないようです。