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

Question

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

      <div class="gb-box-holder">
        <!-- GUIDE BOX -->
        <div class="gb-box gb-box-1">
          <div class="gb-header">
            <span class="gb-decor-top"></span>
            <div class="gb-logo">
              <img class="gb-img" src="http://www.scim.si/wp-content/uploads/2015/01/apply.jpg" alt="">
              <div class="gb-logo-cover"></div>
            </div>
            <h3>Lorem ipsum dolor</h3>
            <!-- <span class="gb-decor-top"></span> -->
          </div>
          <div class="gb-container">
            <span class="gb-decor-container"></span>
            <p>
              Lorem 
            </p>
            <a class="gb-btn-guide" href="#"> Reed more</a>
          </div>
        </div>
        <!-- GUIDE BOX -->
      </div>

BOXES 部分结束 -->

#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;
}

每个div的.gb-box类

附言。对不起我的破绽，英语不是我的母语

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 block ，这会有点耗时。但它会响应迅速且完美对齐。

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