2

私は次のdivとして持っています。各 div が左にフロートされているか、表示がインライン ブロックに設定されているとします。

+-----------+ +-----------+ +--------------+
|    1      | |     2     | |              |
+-----------+ |           | |      3       |
              +-----------+ |              |
                            +--------------+
+-----------+ +-----------+ +--------------+
|     4     | |     5     | |              |
+-----------+ |           | |      6       |
              +-----------+ |              |
                            +--------------+
+-----------+ +-----------+ +--------------+
|           | |    8      | |      9       |
|    7      | +-----------+ |              |
|           |               +--------------+
|           |
+-----------+

私はこのように達成したい

+-------------+ +-----------+ +-------------+
|     1       | |     4     | |             |
+-------------+ +-----------+ |      7      |
+-------------+ +-----------+ |             |
|      2      | |      5    | |             |
|             | |           | +-------------+
+-------------+ +-----------+ +-------------+
+-------------+ +-----------+ |      8      | 
|             | |           | +-------------+
|       3     | |       6   + +-------------+
|             | |           | |     9       |
|             | +-----------+ |             |
+-------------+               +-------------+

私はこのように列ごとにこれを行うことができることを知っています

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

しかし、私のウェブサイトにはこのようなページがもっとあるので、マークアップに触れずに実現したいと思います。cssまたはjavascript/jqueryメソッドでこれを実行するアイデアはありますか?

4

2 に答える 2

3

JS と jQuery を使用すると、 「ミッション インポッシブル」を「アリス イン ワンダーランド」に簡単に変えることができます。

LIVE DEMO

HTML サンプル:

<div id="cont"> 

   <div></div>
   <!-- ...more  <div></div> here ... -->

</div>

CSS サンプル ( .coljQuery によって追加されます):

#cont .col > div{
  position:relative;
  width:250px;
  background:#eee;
  margin:2px;
  padding:15px;
}

.col{
  float:left;
}

jQuery:

$(function(){

    var cells = $('#cont > div');

    for(var i = 0; i < cells.length; i+=3) {
      cells.slice(i, i+3).wrapAll("<div class='col' />");
    }

});
于 2013-07-01T04:18:02.987 に答える
-1

マークアップに触れないことが、物事を粘着性のあるものにしています。David DeSandro は、Masonry と呼ばれる jQuery を使用してうまく機能するタイトなカスケード グリッド システムを作成しました。

http://masonry.desandro.com/

于 2013-07-01T03:44:26.183 に答える