-14

このフィドルを見てください

4divを高くして div に近づけたいのです1が、余白をそのままにして、Pinterestのピンボード スタイルのレイアウトのように、その方法を知っている人はいますか?

HTML:

<div>1<br/>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

CSS:

div {
  display:inline-block;
  background-color:#CCC;
  float:left;
  width:200px;
  margin:10px 20px;
}

body { width:500px; }

Div4は、残りのようにぴったりとはまりません。詳細については、フィドルを参照してください。

私が欲しいのは、以下の回答で j08691 が提供するこのリンクのようなものです。

4

3 に答える 3

2

CSS の複数列レイアウトを使用して、現在のほとんどのブラウザーで Pinterest レイアウトのようなことを行うことができますが、IE9 およびそれ以前のバージョンでは機能しません。

これがjsFiddle. デモンストレーションのために、さらにいくつかの div を追加しました。

html, body {
    height: 100%;
}
body {
    width: 420px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
    margin: 20px;
}
div {
    display: inline-block;
    background-color:#CCC;
    width:200px;
    margin-bottom: 20px;
}

本体の幅は に設定されて420pxおり、その値は現在、div の幅の 2 倍 + 列のギャップの幅から導出されています。この値と列のギャップの値を使用して、 divの。

古いブラウザーをサポートする必要がある場合は、Columnizer jQuery Pluginを参照してください。

于 2013-05-10T01:37:52.647 に答える
2

JavaScript を使用してこれを実現できますが、CSS フロートだけでは実現できません。jQuery masonryのようなライブラリがうまく機能します。理由？フロートの仕様。特に＃5は、「フローティングボックスの外側の上部は、ソースドキュメントの前の要素によって生成されたブロックまたはフローティングボックスの外側の上部よりも高くない場合があります。」.

于 2013-05-09T23:36:54.630 に答える