5

私が解決しようとしているCSSの問題について、あなたが私を助けてくれることを願っています。

私はdivのセットを持っています。この例では4としましょう。各列の周りにコンテナdivを使用せずに、ページ上の2つの垂直列に構造化したいと思います。

ただし（これがトリッキーな部分です）、各divがその上のdivの真下にくるように配置する必要があります。現時点では、上部に並んでいるようになっています。

コードと例については、こちらをご覧ください。

例に示すように、左側のdivの1つが右側のdivより長くない限り、正常に機能します。

だから...私の問題はです。緑のボックスが黄色のボックスの上部と一列に並ぶのではなく、青いボックスの真下に配置されるようにするにはどうすればよいですか。

使いたくmargin-top: -60pxない。

必要に応じてJavaScript/jQueryを使用しても問題ありませんが、純粋なCSSソリューションが理想的です。

覚えておくべき重要なことは、列の周りにコンテナdivを使用できないことです。

これが可能かどうかさえわかりません、そしてそれを機能させるために1日を無駄にしました...あなたが助けることができれば、私は非常に感謝します-あなたがそれが不可能であることを確認したとしても！

4

3 に答える 3

3

CSS3と古いブラウザーのサポートなし、またはjQuery プラグインの2 つの解決策があります。

CSS3列あり

#wrapper{
    column-count: 2;
    column-gap: 10px;
}

または、互換性を高めるために、ベンダー プレフィックスを使用します。

#wrapper{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

CSSDesk で例を見る

jQueryプラグインで

  1. @allaireが指摘したように、優れた図書館の石積み。

  2. 次に、 Wookmarkがあります。テストしていませんが、非常にきれいに見えます。

  3. または、CSS3 列の動作を模倣するこのjQuery.columnプラグイン。（これもまだ試していません）

また、コラム化を行うプラグインは他にもたくさんあります。石積みの代替品を検索して、あなたの選択を見つけてください。

于 2012-10-22T21:01:11.143 に答える
0

私はかつて似たようなことをして、jQueryを使用するという結論に達しました。これが私が使用したプラグインで、うまく機能しました:

http://masonry.desandro.com/

于 2012-10-22T20:32:54.543 に答える
0

これは純粋な html/css の方法です。

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.container {
  position: relative;
}
div.box {
  float: left;
  width: 50%;
}
div.box:nth-child(odd) {
  margin-right: 1px;
}
div.box:nth-child(even) {
  margin-left: -1px;
}

ボックスの margin-left と margin-right は、左のボックスが左のボックスの隣に浮かないようにします。

于 2016-12-06T15:47:44.717 に答える