如何获得 CSS 布局，如 elkaniho.com/

Question

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

当您重新调整浏览器大小时，它们都会完美地重新调整吗？

有人知道我如何获得与 elkaniho.com 相同的布局，或者这叫什么类型的布局？

Answer 1

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

功能：

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

我会联系该网站的网站管理员，请求允许使用此脚本并更改它以满足您的需求。

Answer 2

还有一个名为 Masonry 的简洁 jQuery 插件，可以处理不同宽度和堆栈的 div尽可能将它们紧紧地固定住。取决于你的内容。

Answer 3

这只是一个六列布局。使用 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（实际上是任何块元素）的操作：它们从上到下堆叠。