Question

我的一个客户（它拥有自己的图形代理商 - ＆gt;意味着我必须做他们想要的事情）给出了一个实现布局来看示例图片：

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

如果有人有建议或个人经历我会非常感谢您的反馈，谢谢你们！

路

Answer 1

我认为你想要使用的是Masonry

Answer 2

不同的方法，基本上只使用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%;
}

Answer 3

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

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

Answer 4

你总是可以使用绝对定位，但这将是一个非常严格的设计。也许是这样的事情？

.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>

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

4 个答案: