CSS高级Div定位。自动排列网格

Question

我有一个动态图片库，可以使用PHP ...

显示

我的PROB

风格与定位应该是如果没有足够的空间用于整个div，如上图所示，那么行中的DIV应该像下面那样定位它们

居中且遥远......

here is JS-Fiddle基本模板集，如果有人想在jsFiddle上尝试一些东西

Answer 1

如果你想用CSS实现这个目标，代码就是这样：

#div {
  clear:both;
  width:500px
}
.img {
   display:block;
   width:150px;
   height: 50px;
   float:left;
}

据我记忆，就是这样...... 祝你好运！

Answer 2

• 永远不要“清除”浮动（至少在网格结束之前）。

• 使用 float:left 样式将每个 img 包含在其自己的 DIV 中，

• 重要提示：给每个 DIV 赋予相同的高度（比最大的照片略大），否则如果图像的高度不同，你会得到一些奇怪的浮动。

• 可选：如果您的图像具有不同的宽度，并且您想要一个漂亮的“网格图案”，那么您可以为所有 DIV 提供一个宽度属性。

• 注意边距对整体高度/宽度的影响。

• 另请注意，如果您在页面上使用标准元视口标签为窄移动屏幕设置格式，这会将您的所有图像推入列以适应该屏幕，而不会使它们无法忍受地缩小（前提是其他东西不会） t 使页面变宽）。

  #div { 宽度：220px； 高度：215px； 向左飘浮; }

Answer 3

只需使用div

的css width属性即可实现所有这些功能

#div {
width:500px;
}

我们在这里实现了几乎相同的

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158

在这里，您可以在网格视图和普通视图之间切换，我们正在玩的所有内容都是divs宽度

http://www.allposters.com/-st/Animal-Posters_c622_.htm

Answer 4

谷歌在图像搜索方面遇到了同样的问题......他们不得不用花哨的脚本来克服它。查看来源，每行图片在<ul>内是<span>，每张图片都在<li>中。然后，当您调整窗口大小时，图像会从一个<ul>移动到另一个blocksPerRow = Math.floor($('#container').width() / blockWidth); $('.row ul').each(function () { while ($(this).children('li').size() > blocksPerRow) ($(this).children('li:last-child').prependTo($(this).nearest('.row').next())); while ($(this).children('li').size() < blocksPerRow) ($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row'))); }); 。这显然是他们想出的最佳方法。

所以，使用jQuery：

$(window).resize()

我认为应该这样做。将其添加到document ready以及{{1}}事件。