想要这样的效果每个 div 宽度固定，高度不固定； div 换行时，上下两个 div 紧贴在一起；请各位指教，先谢谢大家。。。

CSS如何实现这样的布局？

boomler

55521320

发布于
2016-06-07

图片描述

想要这样的效果

每个div宽度固定，高度不固定；
div换行时，上下两个div紧贴在一起；
请各位指教，先谢谢大家。。。

css

html5

阅读 3.3k

4 个回答

得票最新

三次方根

1.2k2318

发布于
2016-06-08

✓ 已被采纳

可以用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>

效果：

林岑影

5.9k2517

发布于
2016-06-07

更新于
2016-06-07

纯css貌似做不到...
用js的实现方法有几种,

用css+div写4列, 然后用js按顺序先将每列填充1个, 从第五个开始, 计算出高度最小的列, 往里面填充第五个, 按第五个的规则, 一直循环到最后一个
用绝对定位, 用js计算每个的top和left

<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        li {
            width: 20%;
            float: left;
        }

        li + li {
            border-left: 1px solid red;
        }

        p { margin-bottom: 10px; text-align: center;}
    </style>
</head>

<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        var list = document.querySelector('#list').querySelectorAll('li');
        for (var i = 0; i <= 50; i++) {
            var j = i % 4;
            list[j].insertAdjacentHTML('beforeEnd', '<p>' + i + '</p>');
        }
    </script>
</body>

</html>