HTML – 使用CSS创建砌体布局？

参见英文答案 > Masonry-style Layout ONLY with CSS                                    2个
我想只使用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;
}

解决方法

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

所以,这里发生的事情的解释如下：

>父母必须有display：flex.>你必须告诉流向,在这种情况下你需要列.>对于项目,您必须定义flex属性.在这种情况下,你希望红色更小,然后比例为1,如果可以,趋势将是100px.蓝色具有双重“重量”,趋势为150px.