没有包装器,是否可以任意向左或向右堆叠无限的div？

Question

我认为这将(相对)容易,但从答案来看,它似乎比我预期的更难.

也许甚至不可能!

目标

我想要一个可以任意分配a .left或.rightclass 的div元素列表.

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

三个条件

1. 每个div的高度不会提前知道

2. 我希望它们在指定的一侧相互堆叠,无论有多少div,它们出现的顺序,以及分配给任何一方的数量.

3. 有些人建议,我不想使用'包装'div.这是因为解决方案必须满足随机数量.left和.rightdiv的排序 (参见下面的示例).

理想情况下,我希望它是一个纯粹的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

我的原始目标似乎是可以撤销的.因此,我没有给出任何答案,尽管我已经把它给了Josh,但是给了我(几乎)实现这一目标的最佳方式,以及他使用的css的大量解释.

感谢大家的帮助和想法.

Answer 1

这是我建议的:

小提琴不需要黑客

这是我们包含的关键CSS:

@media (min-width:400px){
    .left {
        width: 60%;
    }
    .right {
        width: 30%;
        float: none;
        margin-left: 100%;
        transform: translateX(-100%);
    }
}

这个CSS的解释

这样做是将你的.right元素从容器中完全推出左边,然后将它们拖回整个宽度.

的position: relative;和left: 100%;告诉它需要显示关闭所述容器的右边缘的元件.

所述transform: translateX(-100%);然后告诉它需要显示向左(因此负)它的宽度的100%的元素-其中拖动它是与你的右边缘平齐.

使用此解决方案,可以任意重新排序项目,无需进行其他计算.

我希望这有帮助!

更新:

要求一个hack不依赖于DOM顺序的小提琴

这是我们改变的:

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认为这些元素在文档流程中占据的空间可以忽略不计,而实际上我们只是在利用它的边缘来使它显示在以前的位置.这不应该在任意长列表中使用任意排序的元素集失败.基本上我们正在做一些非常类似于float从文档流中删除元素的东西- 但我们只是让它保留空间就好像它没有高度一样.另外,它不会被拖到屏幕的一侧或另一侧.

该calc(1.2rem + 5px)用于margin-top基本上是说:添加此margin-bottom我们拿走了回来,加上原来的5px保证金我们以前.

我rem在这里使用单位,因为你没有任何定义的字体大小.一般来说,你想要使用em,我们可以在这里.我选择1.2这是line-height这些项目的默认值.那么,此修复只适用于元素中的一行文本.您需要了解正在渲染的元素的高度才能使其正常工作.

希望有所帮助!

更新,第二个

摆弄最小的JavaScript

首先,添加:

CSS

.right.last {
    margin-top: 0;
}

然后添加:

JavaScript的

var rights = document.querySelectorAll(".right");
rights[rights.length-1].className += " last";

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

Answer 2

我在这里更新了 JSFiddle 。现在正在工作。我在左侧 div 和右侧 div 添加了额外的包装器。

<div class="left">
 <div class="left">left one</div>
 <div class="left">left two</div>
</div>
<div class="right">right one</div>
<div class="left">left three</div>
<div class="right">
 <div class="right">right two</div>
 <div class="right">right three</div>
 <div class="right">right four</div>
 <div class="right">right five</div>
</div>