如何永久地对齐堆叠元素的div

Question

我需要将容器内的所有div移到它上面的div

#gd-section .gb-box-holder {
  display:                 flex;
  display:                 -webkit-flex;
  flex-wrap:               wrap;
  -webkit-flex-wrap:       wrap;
  justify-content:         top;
  -webkit-justify-content: top;
}
#gd-section .gb-box-holder .gb-box {
  display: block;
  width: 246px;
  background-color: #303030;
  margin: 5px;
  float: left;
}

BOXES SECTION END - ＆gt;

as.name

每个div的

.gb-box类

PS。抱歉我的剥落，英语不是我的母语

Answer 1

有多种方法可以解决这个问题。 flex创建的包裹只是水平而不是垂直 - 因此，您将无法向上堆叠项目。所以必须以列式方式完成。你只需要反转一些东西，使它像你想要的那样工作。

<强> Here is a way to do this using Flex.

另一种方法是使用 HTML Columns ，这是您最快的选择，但它不会在所有浏览器中都有响应，因此您需要使用前缀和手动调整。

div {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3; /* Firefox */
  columns: 100px 3;
}

您可以在 here.

上找到一个很好的教程

另一种更为万无一失的方法是使用名为 CSS Masonry 的插件，该插件使用JavaSript以某种方式对齐您的项目。这里唯一的问题是它会为你的代码添加一些js批量，这将耗费一些时间。但它会反应灵敏，完全一致。

如果您决定使用CSS列路径， this CodePen 对您也有好处。

Answer 2

使用flexbox无法实现此目的，但您可能希望尝试使用css列，尽管它们用于文本。

.gb-box-holder {
    columns: 200px 3;
}

http://codepen.io/ingvi/pen/EgAZwz/