このプロパティを使用して、column-count
3 つの列に複数の div があるページを設定しています。これは、大きな画面で見栄えがします。各 div の幅は、たとえば 500px (含まれる画像) に固定されています。
ただし、小さい画面で作業している場合、ブラウザーはコンテンツを元の \3 列内に強制しようとしますが、2 列に移動する必要があります。コンテンツがオーバーラップし始めたときに、コンテンツを 2 列に移動する最適な方法はありますか?
このプロパティを使用して、column-count
3 つの列に複数の div があるページを設定しています。これは、大きな画面で見栄えがします。各 div の幅は、たとえば 500px (含まれる画像) に固定されています。
ただし、小さい画面で作業している場合、ブラウザーはコンテンツを元の \3 列内に強制しようとしますが、2 列に移動する必要があります。コンテンツがオーバーラップし始めたときに、コンテンツを 2 列に移動する最適な方法はありますか?
column-width
ではなくプロパティを使用するcolumn-count
と、ブラウザーは必要に応じて列の数を自動的に調整して、使用可能なスペースを埋めます。
http://codepen.io/cimmanon/pen/CcGlE
.foo {
columns: 500px; // shorthand, prefixes may be necessary
}
@media (max-width: 500px) {
.your element selector here {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
}