jquery - 像旧表一样制作网格/流体布局，但使用 divs/css/jquery

Question

我的一个客户(它有自己的图形代理 -> 意思是我必须做他们想做的事)给出了一个虽然布局来实现参见示例图像:

可在此处找到示例图像:https://dl.dropbox.com/u/1857982/grid.gif

我让它可以与老式 table 一起工作，虽然我非常讨厌自己，所以我试图找到其他方法..特别是因为我想添加一些流畅的响应行为..

我想避免设置 display:table-cell 等等，因为缺乏支持:是的，他们不介意使用 IE7.5，我不能说“嘿更新你的 cr*** 浏览器”

float div 不起作用，因为它们不允许我做那种类型的网格...

所以我想问你:有什么好的 jquery 可以帮助我吗？

我看到了一些，但我不确定(我正在测试)我是否可以像我附加的图像一样完美地粘在我的容器中......

目前正在测试: http://www.inwebson.com/jquery/blocksit-js-dynamic-grid-layout-jquery-plugin/http://www.wookmark.com/jquery-plugin

如果有人有任何建议或个人经验，我非常感谢您的反馈，谢谢你们!

卢克

Answer 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%;
}