也许甚至不可能！
目标
我想要一个可以任意分配一个.left或.right类的大量的div元素列表.
所有的.left div应该在左侧堆叠在彼此之下,右侧的.right div应该堆叠在彼此的下方.每个类中的div数是任意的.
三个条件
>每个div的高度不会提前知道
>我希望他们在指派下堆叠在彼此之下
无论现在有多少div,他们出现了什么顺序,还有几个div
分配给任一方.
>我不想像某些人所建议的那样使用’wrapper’div.这是
因为解决方案必须满足随机数量和排序
.left和.right div(参见下面的例子).
理想情况下,我希望它是一个纯粹的html / css解决方案,尽可能向后兼容 – 尽管我意识到这可能是不切实际的.
示例HTML
<div class="left">left one</div> <div class="left">left two</div> <div class="right">right one</div> <div class="left">left three</div> <div class="right">right two</div> <div class="right">right three</div> <div class="left">left four</div> <div class="right">right four</div> <div class="right">right five</div> <div class="left">left five</div> <div class="right">right six</div> <div class="right">right seven</div>
UPDATE
经过这么多答案后,我对答案/技巧的范围印象深刻,但都没有一个满足所有条件.
因此,我试图获得一个坚实的解决方案,占有我四分之一的美誉.
更新2
似乎我的原始目标是可撤销的.因此,我没有标记为答案,虽然已经提出了一个赏金,但我授予乔希谁给了我最好的方式(几乎)实现这一点,以及他所使用的css的很好的解释.
感谢大家的帮助和想法.
解决方法
这是我们包括的关键CSS：
@media (min-width:400px){
.left {
width: 60%;
}
.right {
width: 30%;
float: none;
margin-left: 100%;
transform: translateX(-100%);
}
}
这个CSS的解释
这样做是将你的.right元素完全从容器向左推,然后将它们拖回整个宽度.
职位：亲戚;左：100％;告诉元素它需要显示从容器的右边缘.
转换：translateX(-100％);然后告诉元素,它需要显示在左边(因此是负的)100％的宽度 – 它拖动它与你的右边缘齐平.
有了这个解决方案,项目可以任意重新排序,不需要额外的计算.
我希望这有帮助！
更新：
Fiddle requiring one hack not dependent on DOM order
这是我们改变的：
CSS
.right {
width: 30%;
float: none;
margin-left: 100%;
transform: translateX(-100%);
margin-bottom: -1.2rem; /* New */
margin-top: calc(1.2rem + 5px); /* New */
}
.right:first-of-type {
margin-top: 0; /*optional - if there's a preceding element on the page this will prevent it from being shifted downward*/
}
这样做是为了使DOM认为这些元素在文档流程中占用的空间可以忽略不计,而实际上我们只是用它的边距来调整它们的位置,使之显示出来.这不应该在任意长列表中随意排列一组元素.基本上我们正在做一些非常类似于浮动在文档流中移除元素的功能 – 但是我们只是把它保留空间,就像没有高度一样.此外,它不会拖到屏幕的一侧或另一侧.
margin-top的calc(1.2rem 5px)基本上是说：添加这个margin-bottom我们收回了,加上原来的5px margin.
我在这里使用rem单位,因为您没有任何定义的字体大小.一般来说,你会想要使用em,我们可以在这里.我选择了1.2,因为这是这些项目的默认行高.那么这个修复只适用于元素中的一行文本.您需要对渲染元素的高度有所了解,以使其正常工作.
希望有帮助！
更新,第二
Fiddling with minimal JavaScript
首先,添加：
CSS
.right.last {
margin-top: 0;
}
然后添加：
JavaScript的
var rights = document.querySelectorAll(".right");
rights[rights.length-1].className += " last";
而且你不会再看到最后一个元素的差距.
