Div不与其他人一起移动

Question

所以我试图让所有这些div都相应地移动。因此，如果一个行对象比另一个行对象短，则下一行对象将向上拉两行。

这是我的问题：

请帮忙。我的div设置为display: inline-block;

http://prntscr.com/4g99di http://prntscr.com/4g99g3

Answer 1

您可以将HTML生成为列而不是行吗？ 而不是：

row
  YouTube
  News
  Recent Posts
/row
row
  Vote
  Donate
/row

也许这样做：

row
  col
    YouTube
    Vote
  /col
  col
    News
    Donate
  /col
  col
    Recent Posts
  /col
/row

Answer 2

尝试使用砌体插件。这是我的例子：

HTML：

<script src="http://masonry.desandro.com/js/masonry-docs.min.js"></script>
<div id="container">
<div class="item">
    <h2>DIV 1</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="item">
    <h2>DIV 2</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</div>
<div class="item">
    <h2>DIV 3</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="item">
    <h2>DIV 4</h2>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</div>
</div>

JS：

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

CSS：

.item {
    display: inline-block;
    width: 200px;
}

jsfiddle例子：

http://jsfiddle.net/1ba5t64b/

Answer 3

您可以使用CSS3列来解决此问题：

在内容中应用此课程

  -webkit-column-width: 300px; /* Chrome, Safari, Opera */
  -moz-column-width: 300px; /* Firefox */
  column-width: 300px;
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px; /* Firefox */
  column-gap: 20px;

您可以在http://codepen.io/oriolet/pen/avztJ/

中看到一个示例