Question

我搜索过几件事，但我找不到答案。也许你可以帮助我。

我想在Pinterest上对齐div元素。并非所有的div都是相同的高度，但是沟槽宽度保持不变。我正在设计一些东西，我也想编程。

以下是我的意思的图片，以澄清：http://nl.tinypic.com/r/ekkkte/8

Graphicburger.com使用我的意思做同样的事情。我只是想知道如何调整他的内容。

Answer 1

嗯，实现这一目标的一种方法是使用Masonry。我认为这是Pinterest实际用于布局的内容。这也适用于jQuery，如果你也使用它。如果您正在寻找有关此背后理论的更多信息，请查看this link

以下是Masonry插件/库链接的演示代码：

HTML

<div id="container">
  <div class="item">...</div>
  <div class="item w2">...</div>
  <div class="item">...</div>
  ...
</div>

<script src="/path/to/masonry.pkgd.min.js"></script>

CSS

.item { width: 25%; }
.item.w2 { width: 50%; }

的Javascript

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

Answer 2

我几天前回复了一篇非常类似的帖子..示例代码为html和css：How to create grid position elements like in this image css

介意看看？

对齐像pinterest一样的div

2 个答案: