9

幅は同じで高さが異なる div があります。それらは列に表示され、その上の次の div までフローティングする必要があります。

フィドル: http://jsfiddle.net/kaljak/DAYSk/

Is there any way to handle that without placing them via Javascript?

私の考えの 1 つは、列の div を作成し、そこに div を配置することですが、マークアップを追加せずに別の可能性はありますか?

前もって感謝します！

4

4 に答える 4

5

別の可能な解決策は、CSS 列を使用することです。コンテナーに列プロパティを適用する

body {
    -moz-column-width: 100px;
    -webkit-column-width: 100px;
    column-width: 100px;
}

次にdisplay: inline-block;、divs で使用します。

例: http://jsfiddle.net/tdwZe/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layoutsも参照してください。

注: CSS 列は、IE10 より古い IE ではサポートされていません ( http://caniuse.com/#feat=multicolumn )。

于 2013-07-13T17:02:11.997 に答える
2

できますが、これらのボックスを親ボックスに配置する必要があります

デモ http://jsbin.com/ozazat/3/edit

たとえば、それぞれが希望する数のボックスを保持する 3 つの列:

div div {
  background-color:red;
  margin:10px;
}
.col1, .col2, .col3 {
  width:100px;
  float:left;
  border:solid;
}

HTML

<div class="col1">
    <div>text</div>
    <div>text</div>
    <div>text</div>
  </div>  
  <div class="col2">

        <div>text<br>text</div>
    <div>text</div>

  </div>  
  <div class="col3">
        <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>

  </div>
于 2013-07-13T16:36:58.047 に答える
1

はい。絶対位置を使用できます。divの高さを知っていると仮定します。このソリューションは、動的コンテンツにはうまく機能しません。

クラスを各 div に割り当て、関連する CSS を提供して正しく配置する必要があります。

div1 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 0;
}

div2 {
  height: 100;
  position: absolute;
  left: 0; 
  top: 100px; /* The height of the div above it */
}

等...

動的コンテンツがある場合は、JavaScript、特にjQuery Masonry Pluginを使用することをお勧めします。

これを行う別の方法は、前述のように、div を列に積み重ねることです。

詳細については、この質問を参照してください。

于 2013-07-13T16:30:34.877 に答える
0

すべての div に float:left を使用し、奇数の div ごとに clear:left を使用します。これは、odd-child を使用する場合を除いて、クロス ブラウザーで機能します。追加のマークアップを追加して、そのために私が望むものを推測する必要があります。残念ながらそれを回避する方法はありません

于 2013-07-13T18:25:26.463 に答える