使用html/css重叠行

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

到目前为止，我得到的是 但这是1）复杂/不“干净”的，2）实际上不起作用，因为它在这里看起来已经不同于在codepen上。 谢谢你的帮助

body{背景：ff00c6；宽度：100vw；高度：100vh；}
#图标{边距：自动；高度：10vh；边框：1px纯白；文本对齐：中心；}
.图标{
浮动：左；
}
.小{宽度：1vw；p}
.large{宽度：2vw；}

---

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

var rows=document.getElementsByClassName（'row'）；
对于（变量i=1；i

body{背景：ff00c6；宽度：100vw；高度：100vh；}
#图标{边框：1px纯白；}
.icon{float:left；宽度：2vw；高度：2vw；背景：url（'https://image.ibb.co/jDaNTn/icon_notice.png“）居中不重复；背景大小：包含；}
.行{宽度：100%；高度：2vw；}
.small.icon{背景大小：50%}
.small.icon:first child{左边距：1vw；}
/*编辑：JS解决方案
.row:n个子（2）{transform:translate（0，-1vw）；}
.row:n个子（3）{transform:translate（0，-2vw）；}
... */

非常感谢。但“重叠”现在如何运作？这样，它将是分隔的行，但小图标应该在大图标之间（如屏幕截图）？编辑文章，使用变换可以获得所需的效果。但是，这种方式也需要编辑CSS，因为需要为每一行添加更多的翻译（-1vw，-2vw，-3vw，等等…）。用javascript或php计算这些可能更好。