砌体将具体布置

【问题标题】：Masonry will specific layout砌体将具体布置
【发布时间】：2017-06-19 04:36:10
【问题描述】：

我怀疑我只是不知道如何思考这个问题以寻找答案。

我正在使用砖石来布置 17 个街区。块的宽度为 50% 或 25%。我的问题是我想实现 4 1 布局，所以它看起来像这样：

1 1 | | 1 1 1 |

相反，masonry 会自动在一行中运行 25% 宽的 div，如下所示：

1 1 1 1 1

非常感谢任何关于如何实现我想要的建议！

【问题讨论】：

标签： css masonry

【解决方案1】：

试试这个 HTML

<div class="columns">
  <div class="column">
    1
  </div>
    <div class="column">
    1
  </div>
</div>

<div class="columns">
   <div class="column" style="margin-left: auto;display: block">
    1
  </div>
</div>

<div class="columns">
  <div class="column">
    1
  </div>
    <div class="column">
    1
  </div>
</div>

CSS

.columns{
  width: 100%;
}
.column{
  height: 100px;
  display: inline-block;
  width: 25%;
  background:red;
  margin-top: 1em;
}

https://codepen.io/ClarkCalnia/pen/jwBEJw

【讨论】：

感谢您的回复。但是，我正在使用 Masonry.js，并且正在寻找使用该库的解决方案。