0

私のクライアントの1人（独自のグラフィックエージェンシー->彼らが望むことをしなければならないことを意味します）は、サンプル画像を参照して実装するためのレイアウトを提供しました：

画像の例はここにあります：https ：//dl.dropbox.com/u/1857982/grid.gif

昔ながらのテーブルで動作するようになりましたが、私は自分自身を非常に嫌っていたので、別の方法を見つけようとしています。特に、流動的な応答動作を追加したいためです。

サポートが不足しているため、display：table-cellなどの設定は避けたいと思います。はい、IE7.5を使用してもかまいません。また、「cr***ブラウザを更新してください」とは言えません。

フローティングdivは、そのタイプのグリッドを実行できないため、機能しません...

だから私はあなたに尋ねるつもりでした：それで私を助ける良いjqueryはありますか？

私はそれらのいくつかを見ましたが、私が添付した画像と同じようにコンテナに完全に貼り付けることができるかどうかはわかりません（私はテストしています）...

現在テスト中：http： //www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/ http://www.wookmark.com/jquery-plugin

誰かが提案や個人的な経験を持っているなら、私は本当にフィードバックをいただければ幸いです、みんなありがとう！

ルーク

4

4 に答える 4

1

使いたいのは石積みだと思います

于 2013-01-17T19:52:21.087 に答える
1

別のアプローチ。基本的には、パーセンテージでdivとcssを使用するだけです。htmlは私が望むより少し醜いですが、テーブルよりはましです。この場合、何か醜いものになることがわかっています。

http://jsfiddle.net/sw29M/1/

<div class="wrapper">
<div class="row">
  <div class="column">
    <div class="one item">a</div>
    <div class="two item">b</div>
  </div>
  <div class="column item three">c</div>
  <div class="column">
    <div class="two item">d</div>
    <div class="one item">e</div>
  </div>
</div>
<div class="row">
  <div class="column item double four">a</div>
  <div class="column">
    <div class="two item">b</div>
    <div class="one item">c</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="one item">a</div>
    <div class="five item">b</div>
  </div>
  <div class="column item three">c</div>
  <div class="column">
    <div class="two item">d</div>
    <div class="one item">e</div>
  </div>
</div>
<div class="row">
  <div class="column">
    <div class="two item">a</div>
    <div class="one item">b</div>
  </div>
  <div class="column">
    <div class="one item">a</div>
    <div class="two item">b</div>
  </div>
  <div class="column three item"></div>
</div>
</div>

.one{
 background: #fff;
}
.two{
 background: #222;
}
.three{
 background: #999;
}
.four{
 background: #ccc;
}
.five{
 background: #ddd;
}
.wrapper{
 height: 100px; /*this will define the height of the box*/
}
.row{
 height: 100%;
 width: 100%;
}
.row:after{ /* clearfix */
  content: "";
  display: table;
  clear: both;
}
.row .column{
 width: 33%;
 float: left;
 height: 100%;
}
.row .column.double{
 width: 66%;
}
.row .column .item{
 height: 50%;
 width: 100%;
}
于 2013-01-17T20:36:29.463 に答える
0

正直なところ、この特定の問題にjQuery/cssを使用して簡単に解決できる方法はないと思います。テーブルを本当に使用したくない場合は、多くのフローティングdivで動作させることができます（可能ですが、それほど便利ではありません）。

IMOと、古いブラウザを使用するという事実を考慮すると、テーブルを使用するのが適切な場合があります

于 2013-01-17T19:48:20.347 に答える
0

常に絶対測位を使用できますが、それは非常に堅固な設計になります。おそらくこのようなもの？

.one, .two, .three, .four{
 position: absolute;
 top: 0;
 left: 0;
}

.one, .two{
 width: 200px;
 height: 100px;
}
.two{
 background: #222;
}
.three{
 width: 200px;
 height: 200px;
 background: #666;
}
.four{
 width: 400px;
 height: 200px;
 background: #ccc;
}
.two.location{
 top: 100px;
}
.three.items{
 left: 200px;
}
.one.more{
 top: 100px;
 left: 300px;
}

<div class="one main"></div>
<div class="two location"></div>
<div class="three items"></div>
<div class="one more"></div>
于 2013-01-17T19:54:28.640 に答える