用html / css重叠行

Question

使用html / css进行此布局的最佳和最干净的方法是什么？

到目前为止，https://codepen.io/sigug/pen/VxWJoJ 但这是1）复杂/不“干净”和2）不能真正起作用，因为它在这里已经看起来不同于在codepen上。 谢谢你的帮助..

body { background: #ff00c6; width: 100vw; height: 100vh; }

#icons { margin: auto auto; height: 10vh; border: 1px solid white; text-align: center; }
.icon {
  float: left;
}

.small { width: 1vw; p}

.large { width: 2vw; }

<div id="icons">
  
<div class="icon" style="position: relative; left: 85px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>

<div class="icon" style="position: relative; left: 105px; top: -10px; "><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>

<div class="icon" style="position: relative; left: 125px; top: -10px;"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="small"></div>
  
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
<div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>
  <div class="icon"><img src="https://image.ibb.co/jDaNTn/icon_notice.png" class="large"></div>

</div>

Answer 1

尽量保持代码的可扩展性和可读性，因此如果您以后想要添加更多行，则只需更改HTML标记即可轻松实现。也许我的解决方案不是100％准确，但我会尝试让您了解如何实现此布局。

＆＃13;

＆＃13;

var rows = document.getElementsByClassName('row');
for(var i = 1; i < rows.length; i++) {
  rows[i].style.transform='translate(0,-' + i + 'vw)';
}

＆＃13;

body {background:#ff00c6;width:100vw;height:100vh;}
#icons {border:1px solid white;}
.icon {float:left;width:2vw;height:2vw;background:url('https://image.ibb.co/jDaNTn/icon_notice.png') center center no-repeat;background-size:contain;}
.row {width:100%;height:2vw;}
.small .icon {background-size:50%}
.small .icon:first-child {margin-left:1vw;}

/* EDIT: JS solution
.row:nth-child(2) {transform:translate(0,-1vw);}
.row:nth-child(3) {transform:translate(0,-2vw);}
... */

＆＃13;

<div id="icons">
  <div class="small row">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
  <div class="big row">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
  <div class="small row">
    <div class="icon"></div>
    <div class="icon"></div>
    <div class="icon"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：

  

编辑帖子，使用变换可以获得所需的效果。   但是这样你也需要编辑CSS，因为你需要   为每一行添加更多翻译（-1vw，-2vw，-3vw等）   上...）。用javascript或php计算它们可能更好。

提供JS解决方案