html – 是否有可能在没有包装器的情况下任意地堆叠无限制的div？

概述我认为这将是(相对容易的),但是从答案中看起来比我预想的要难. 也许甚至不可能！ 目标 我想要一个可以任意分配一个.left或.right类的大量的div元素列表. 所有的.left div应该在左侧堆叠在彼此之下,右侧的.right div应该堆叠在彼此的下方.每个类中的div数是任意的. 三个条件 >每个div的高度不会提前知道 >我希望他们在指派下堆叠在彼此之下 无论现在有多少div,他们出 我认为这将是(相对容易的),但是从答案中看起来比我预想的要难.

也许甚至不可能！

目标

我想要一个可以任意分配一个.left或.right类的大量的div元素列表.

所有的.left div应该在左侧堆叠在彼此之下,右侧的.right div应该堆叠在彼此的下方.每个类中的div数是任意的.

三个条件

>每个div的高度不会提前知道
>我希望他们在指派下堆叠在彼此之下
无论现在有多少div,他们出现了什么顺序,还有几个div
分配给任一方.
>我不想像某些人所建议的那样使用’wrapper’div.这是
因为解决方案必须满足随机数量和排序
.left和.right div(参见下面的例子).

理想情况下,我希望它是一个纯粹的HTML / CSS解决方案,尽可能向后兼容 – 尽管我意识到这可能是不切实际的.

示例HTML

<div >left one</div><div >left two</div><div >right one</div><div >left three</div><div >right two</div><div >right three</div><div >left four</div><div >right four</div><div >right five</div><div >left five</div><div >right six</div><div >right seven</div>

UPDATE

经过这么多答案后,我对答案/技巧的范围印象深刻,但都没有一个满足所有条件.

因此,我试图获得一个坚实的解决方案,占有我四分之一的美誉.

更新2

似乎我的原始目标是可撤销的.因此,我没有标记为答案,虽然已经提出了一个赏金,但我授予乔希谁给了我最好的方式(几乎)实现这一点,以及他所使用的CSS的很好的解释.

感谢大家的帮助和想法.

解决方法 这是我建议的：

Fiddle requiring no hacks

这是我们包括的关键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";

而且你不会再看到最后一个元素的差距.

总结

以上是内存溢出为你收集整理的html – 是否有可能在没有包装器的情况下任意地堆叠无限制的div？全部内容，希望文章能够帮你解决html – 是否有可能在没有包装器的情况下任意地堆叠无限制的div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。