0

我的一位客户（拥有自己的图形代理 -> 意味着我必须做他们想做的事）给出了一个布局来实现查看示例图像：

可以在此处找到示例图像：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

不同的方法，基本上只是使用带有百分比的 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 回答
1

我想你想要使用的是Masonry

于 2013-01-17T19:52:21.087 回答
0

老实说，我认为您不会通过使用 jQuery/css 来解决这个特定问题。如果你真的不想使用表格，你可能可以让它与很多浮动 div 一起工作（这是可能的，但不是那么方便）。

IMO 并考虑到他们将使用旧浏览器这一事实，table 可能是正确的使用方式

于 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 回答