8

このプロパティを使用して、column-count3 つの列に複数の div があるページを設定しています。これは、大きな画面で見栄えがします。各 div の幅は、たとえば 500px (含まれる画像) に固定されています。

ただし、小さい画面で作業している場合、ブラウザーはコンテンツを元の \3 列内に強制しようとしますが、2 列に移動する必要があります。コンテンツがオーバーラップし始めたときに、コンテンツを 2 列に移動する最適な方法はありますか?

4

2 に答える 2

13

column-widthではなくプロパティを使用するcolumn-countと、ブラウザーは必要に応じて列の数を自動的に調整して、使用可能なスペースを埋めます。

http://codepen.io/cimmanon/pen/CcGlE

.foo {
    columns: 500px; // shorthand, prefixes may be necessary
}
于 2013-10-08T17:26:11.367 に答える
2
@media (max-width: 500px) {
  .your element selector here {
 -webkit-column-count: 2;
  -moz-column-count:    2;
  column-count:         2;

  }
}
于 2013-10-08T17:27:29.010 に答える