css - 如何在 elkaniho.com/ 上获得 CSS 布局

Question

这个网站http://www.elkaniho.com/有一个 CSS 布局，这是我想要的，你看，div 堆叠在彼此的顶部，不是在精确的网格上，而是在底部和侧面。

当你重新调整浏览器的大小时，它们都重新调整得很完美吗？

任何人都知道我怎样才能获得与 elkaniho.com 相同的布局或这称为什么类型的布局？

Answer 1

还有一个名为Masonry的简洁 jQuery 插件，它可以处理不同宽度的 div 并将它们尽可能紧密地堆叠起来。取决于你的内容。

Answer 2

这只是一个六列布局。用 6 个 div 轻松完成：

<div id="container">
  <div class="column">one</div>
  ...
  <div class="column">six</div>
</div>

作为流体布局：

#container { overflow: auto; }
div.column { width: 16%; float: left; }

您当然也可以固定宽度。

然后，每一列都有几个 div，它们做 div（实际上是任何块元素）所做的事情：它们从上到下堆叠。

Answer 3

您所说的效果是使用javascript创建的。如果您查看源代码，您会发现一个名为 funciones.js 的 javascript 文件的链接，其中包括负责此效果的名为 cajas 和 cajasInterior 的函数。另请注意，他们使用的是 jQuery。

功能：

1. 根据正文宽度、框宽和边距计算出最大列数
2. 将所有具有 box 和 boxInterior 类的 div 设置为具有绝对位置并设置它们的宽度
3. 遍历每个框并计算左侧和顶部位置。

我会联系该网站的网站管理员并请求使用此脚本并对其进行更改以满足您的需求。