html5 - CSS如何实现这样的布局？

问题描述

问 题

想要这样的效果

• 每个div宽度固定，高度不固定；

• div换行时，上下两个div紧贴在一起；
  请各位指教，先谢谢大家。。。

解决方案

可以用flex-box

#container { 
  padding: 0;
  margin: 0;
  display: flex;
  flex-flow: column wrap;
  height: 4em;
  width: 3.6em;
}

.same_width {
  background-color:#E91E63; 
  width: 1em; 
  margin: 0.1em; 
}

#a {height:1em}
#b {height:2em}
#c {height:3em}
#d {height:4em}
#e {height:2em}
#f {height:1em}
#g {height:2em}

<div id="container">
  <div id="a" class="same_width">
  </div>
  <div id="b" class="same_width">
  </div>
  <div id="c" class="same_width">
  </div>
  <div id="d" class="same_width">
  </div>
  <div id="e" class="same_width">
  </div>
  <div id="f" class="same_width">
  </div>
  <div id="g" class="same_width">
  </div>
</div>

效果：

这篇关于html5 - CSS如何实现这样的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！