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

前端之家收集整理的这篇文章主要介绍了html – 是否有可能在没有包装器的情况下任意地堆叠无限制的div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我认为这将是(相对容易的),但是从答案中看起来比我预想的要难.

也许甚至不可能!

目标

我想要一个可以任意分配一个.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的很好的解释.

感谢大家的帮助和想法.

解决方法

这是我建议的:

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";

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

原文链接:https://www.f2er.com/html/229529.html

猜你在找的HTML相关文章