CSS 高级 div 定位。自动排列到网格答案

【问题标题】：CSS Advanced Div Positioning. Auto Arrange to GridCSS 高级 div 定位。自动排列到网格
【发布时间】：2021-03-13 22:17:10
【问题描述】：

我有一个动态图片库要显示，使用 PHP...

我的问题

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

centered 和等距...

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

【问题讨论】：

我认为单独使用 CSS 是不可能的。
@casablanca 你完全可以用 CSS 做到这一点
其中会涉及到一些匹配计算，如果您有兴趣请告诉我，我可以为您详细解释。根据每行图像的宽度更大，我们必须取最大值并与高度相同。我们已经花了足够的时间并使其也可配置，如果您测试过，请告诉我，我会向您详细解释
@gov：是的，我可以做计算……但我想通过使用样式来解决它

标签： css positioning html

【解决方案1】：

如果你想只用 CSS 来实现，代码如下：

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

据我所知，就是这样。。祝你好运！

【讨论】：

【解决方案2】：

永远不要“清除”浮动（至少在网格结束之前）。
用 float:left 样式将每个 img 括在自己的 DIV 中，
重要提示：为每个 DIV 赋予相同的高度（比最大的照片略大），否则如果图像的高度不同，您会得到一些奇怪的浮动。
可选：如果您的图像具有不同的宽度，并且您想要一个漂亮的“网格图案”，那么您可以为所有 DIV 提供一个宽度属性。
注意边距对整体高度/宽度的影响。
另外请注意，如果您在页面上使用标准元视口标记来为狭窄的移动屏幕设置它们的格式，这会将您的所有图像推入列以适应该屏幕，而不会使它们缩小到无法忍受的程度（前提是其他东西不会使页宽）。

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

【讨论】：

【解决方案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

【讨论】：

这不是 OP 想要的。您的示例总是连续只有 3 张图像，但 OP 希望根据浏览器宽度调整图像数量。
使用 window.width 或 document.width 我们也可以计算这些东西
难道我们没有类似float:justify :)

【解决方案4】：

Google 在他们的图片搜索中也遇到了同样的问题……他们不得不用花哨的脚本来克服它。看源码，每行图片都是<ul>在<span>里面，每张图片在<li>里面。然后，当您调整窗口大小时，图像会从一个 <ul> 移动到另一个。显然，这是他们能想到的最好方法。

所以，使用 jQuery：

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')));
});

我认为应该这样做。将其添加到 $(window).resize() 以及 document ready 事件中。

【讨论】：