css - 下と左の CSS フロート

Question

高さが可変の div が多数あります。これらの div を相互に並べ替える必要がありますが、ウィンドウの終わりに達したら、新しい「列」を作成します。

現在、div がオーバーフローしていますが、新しい「列」を作成する必要があります。

ところで：

私は以下を使用して解決策を持っています:

-webkit-column-gap: 16px;
-webkit-column-width: 230px;

しかし、他のブラウザをサポートする必要があります。

ご協力ありがとうございました！

Answer 1

CSSのみで行うには、

オプションは、コンテナ上でcolumn-countおよびを使用します。max-height

デモを見る

しかし、ブラウザのサポートについてはわかりません。

それは、少なくともある程度までは、あなたが望むことをちょっとしますが、おそらくjavascriptで何かをしたほうがよいでしょう。

編集:ここにCSSを貼り付けます:

.container {
    column-count: 3; 
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    -ms-column-count: 3; 
    -o-column-count: 3;

    vertical-align:text-top;

    max-height:100px;
}

Answer 2

この問題を解決する別の方法は、jQuery を使用して使用可能なウィンドウの高さを取得し、この情報に基づいて各列を作成することです。別の方法で、まだ jQuery を使用している場合は、Mansory jQuery ( http://masonry.desandro.com/ ) プラグインまたは Isotope ( http://isotope.metafizzy.co/ ) を使用します。

Answer 3

次のようにしてみてください: maxHeight はウィンドウの高さとまったく同じです。

<style type="text/css">
.maxHeight {
  display:inline-table;
  height:600px;
  width:50px;
  float:left;
  background-color:#09F;
  margin:3px;
}
.box {
  display:inline-block;
  height:50px;
  width:50px;
  background-color:#33F;
  margin:2px;
}
</style>


<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

<span class="maxHeight">
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
  <span class="box"></span>
</span>

これをループする Javascript には少し注意が必要ですが、可能性は十分にあります。