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

概述参见英文答案 > Masonry-style Layout ONLY with CSS                                    2个 我想只使用CSS而不是jquery或javascript来创建这个布局.是否有可能,如果是,请指导我找到正确的来源.谢谢 ：) 我试着尝试了这一点,但结果并不顺利： http://codepen.io/anon/pen/GJZWoX H 参见英文答案 > Masonry-style Layout ONLY with CSS                                    2个
我想只使用CSS而不是jquery或JavaScript来创建这个布局.是否有可能,如果是,请指导我找到正确的来源.谢谢 ：)

我试着尝试了这一点,但结果并不顺利：
http://codepen.io/anon/pen/GJZWoX

HTML：

<div >  <div >  </div>  <div >  </div>  <div >  </div>   <div >  </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.

总结

以上是内存溢出为你收集整理的HTML – 使用CSS创建砌体布局？全部内容，希望文章能够帮你解决HTML – 使用CSS创建砌体布局？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。