html5 - CSS如何实现这样的布局？-PHP中文网问答

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

巴扎黑 2017-04-17 13:23:44

[HTML讨论组]

409

巴扎黑

全部回复(4)

怪我咯2017-04-17 13:25:44 4楼

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

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

效果：

赞 +0

添加回复

阿神2017-04-17 13:25:44 3楼

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

用css+p写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>

赞 +0

添加回复