小编web*_*bbo的帖子

我是在stackoverflow上发布的新手,也是使用Codepen的新手; 所以请和我一起温柔!

在找到David DeSandro精彩的砌体后,我找到了惊人的同位素.我一直在努力完成(我相信)应该是维护项目原始顺序的非常简单的任务.撕掉我的头发好几天之后(还尝试了''''''''''''''''''''''''''''''''''''''''''''''''''''... ... ...

基本上,我有许多页面,每个页面包含(不同的)"盒子"数量.每个盒子都有相同的宽度,但高度不同.这些框必须按原始顺序排列,并在调整窗口大小时保留该顺序.

示例CODEPEN:同位素 - 尝试按原始顺序对项目进行排序

这些方框不会被编号 - 它们仅在我的笔中编号以便说明.

HTML:

<div id="container">

    <div class="prod one"><h1>One</h1></div>
    <div class="prod two"><h1>Two</h1></div>
    <div class="prod three"><h1>Three</h1></div>    
    <div class="prod four"><h1>Four</h1></div>
    <div class="prod five"><h1>Five</h1></div>  
    <div class="prod six"><h1>Six</h1></div>
    <div class="prod seven"><h1>Seven</h1></div>    
    <div class="prod eight"><h1>Eight</h1></div>    
    <div class="prod nine"><h1>Nine</h1></div>
    <div class="prod ten"><h1>Ten</h1></div>
    <div class="prod eleven"><h1>Eleven</h1></div>
    <div class="prod twelve"><h1>Twelve</h1></div>
    <div class="prod thirteen"><h1>Thirteen</h1></div>
    <div class="prod fourteen"><h1>Fourteen</h1></div>
    <div class="prod fifteen"><h1>Fifteen</h1></div>
    <div class="prod sixteen"><h1>Sixteen</h1></div>
    <div class="prod seventeen"><h1>Seventeen</h1></div>        

</div>  <!-- /end container -->

CSS(我在这里道歉 - 尽管经过多次尝试,我的帖子似乎不允许我把它作为代码 - 尽管它有效 - 请参阅我的CodePen示例. …