使用 CSS 创建砌体布局？

Question

我只想使用 CSS 而不是 jquery 或 javascript 创建此布局。是否可能，如果可以，请将我指向正确的来源。谢谢你:)

我试过这个，但效果不佳： http://codepen.io/anon/pen/GJZWoX

HTML:

<div class="parent">

  <div class="red">
  </div>

  <div class="blue">
  </div>

  <div class="red">
  </div>

   <div class="red">
  </div>

</div>

CSS:

.parent{
  width:330px;
}

.red{
  float:left;
  width:150px;
  height:150px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:red;
}

.blue{
  float:left;
  width:150px;
  height:300px;
  margin-bottom:10px;
  margin-left:10px;
  background-color:blue;
}

Answer 1

Flexbox 允许您执行此操作，因为它能够分发内容和间隙。

Flexbox 的使用不是很容易，但并非不可能。这里有一些帮助： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent{
  background: green;
  width:330px;
  height: 330px;
  display: flex;
  flex-flow: column wrap;
}

.red, .blue{
  margin: 10px;
}
.red{
  flex: 1 1 100px;;
  background-color:red;
}

.blue{
  flex: 2 2 150px;
  background-color:blue;
}

给你一支笔：http://codepen.io/vandervals/pen/OVNvaE?editors=110

那么，这里发生的事情的解释如下：

parent 必须有 display: flex。
你必须告诉流向，在这种情况下你需要列。
对于项目，您必须定义 flex 属性。在这种情况下，您希望红色更小，那么比例将是 1，如果可以的话，趋势将是 100px。蓝色有双"weight"倾向150px.

使用 CSS 创建砌体布局？

Creating a Masonry Layout using CSS?

html

css

web

masonry