是否有可能堆叠无限divs左或右任意没有包装？ [英] Is it possible to stack unlimited divs left or right arbitrarily without a wrapper?
问题描述
我认为这将是（相对）容易，但从答案，看起来比我预想更难。
也许甚至不可能！
目标
我想有一个大的div元素列表可以任意分配 .left 或 .right 类。
所有 .left div应在左侧堆叠在下方， .right divs应该在右边堆叠在下面。每个类中的div数是任意的。
>
三个条件
-
-
我希望他们在分配的
侧， -
我不想使用使用一个'wrapper'div有人建议。这是
，因为解决方案必须满足随机数量和顺序的
.left和.rightdivs（见下面的示例）。
理想情况下，我希望它是一个纯html / css解决方案，尽可能向后兼容 - 虽然我意识到这可能是不现实的。
示例HTML
div class =left> left one< / div>
< div class =left> left two< / div>
< div class =right>右一个< / div>
< div class =left> left three< / div>
< div class =right>右两个< / div>
< div class =right> right three< / div>
< div class =left> left four< / div>
< div class =right>右四个< / 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
在这么多的答案后，我印象深刻的答案/技术，但没有一个完全满足所有的条件。
因此，我试图获得一个坚实的解决方案，我的四分之一的我的微薄的声誉！
UPDATE 2
看来我的原始目标可撤销。因此，我没有标记任何作为答案，虽然给了一个赏金，我授予给给了最好的方式（几乎）实现这一点的乔希，以及对他使用的CSS的大解释。
感谢大家的帮助和想法。
这里是我建议的：
小提琴不需要黑客
这里是我们包括的关键CSS： / p>
@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％的宽度 - 这拖动它与你的右边缘齐平。
使用此解决方案，项目可以任意重新排序，不需要进行额外的计算。
我希望这有助于！ p>
更新：
需要一个不依赖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; / *可选 - 如果页面上有前面的元素，将阻止它向下移动* /
}
b $ b
这样做使得DOM认为这些元素在文档流中占用的空间可以忽略不计，而实际上我们只是调整边距，使其显示在之前的位置。这个不应该失败，并且在任意长的列表中随机排列一组元素。基本上，我们做了一些非常类似于 float 在从文档流中移除元素时所做的事情 - 但我们只是将其作为保留空间，就好像它没有高度一样。此外，它不会拖动到屏幕的一侧或其他。
calc（1.2rem + 5px） margin-top 基本上是说：添加这个 margin-bottom $ $ 5px >单位，因为你没有任何定义的字体大小。一般来说，你想使用 em ，我们可以在这里。我选择 1.2 作为这些项目的默认值 line-height 。这个修复，然后，将只适用于一行元素中的文本。
希望有所帮助！
更新，第二个
使用最少的JavaScript
首先，添加：
CSS
.right.last {
margin-top：0;
}
然后添加：
JavaScript
var rights = document.querySelectorAll（。right）;
rights [rights.length-1] .className + =last;
您不会再在最后一个元素上看到这个差距。
I thought this would be (relatively) easy, but from the answers it seems harder than I anticipated.
Perhaps even impossible!
GOAL
I'd like to have a large list of div elements that can arbitrarily be assigned a .left or .right class.
All the .left divs should stack up underneath each other on the left hand side, the .right divs should stack up underneath each other on the right hand side. The number of divs in each class is arbitrary.
THREE CONDITIONS
The height of each div will not be known in advance
I would like them to stack up underneath each other on the assigned side, regardless of how many divs are present, what order they appear in, and how many are assigned to either side.
I don't want to use a 'wrapper' div as some have suggested. This is because the solution must cater for random quantity and ordering of
.leftand.rightdivs (see example below).
Ideally I'd like it to be a pure html / css solution, as backwards compatible as possible - though I realise this may prove unrealistic.
SAMPLE 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
After so many answers I'm impressed by the range of answers/techniques, but none of them quite meet all of the conditions.
Hence I'm staking a quarter of my meagre reputation on trying to get a solid solution!
UPDATE 2
It seems that my original goal is undoable. Therefore I have not marked any as the answer, although having put up a bounty I awarded it to Josh who gave me the best way of (almost) achieving that, along with great explanations of the css he used.
Thanks everyone for your help and ideas.
Here's what I'd recommend:
Fiddle requiring no hacks
Here's the key CSS that we're including:
@media (min-width:400px){
.left {
width: 60%;
}
.right {
width: 30%;
float: none;
margin-left: 100%;
transform: translateX(-100%);
}
}
Explanation of this CSS
What that's doing is pushing your .right elements completely out of the container to the left, and then dragging them back their entire width.
The position: relative; and left: 100%; tell the element that it needs to display off the right edge of the container.
The transform: translateX(-100%); then tells the element that it needs to display to the left (hence the negative) 100% of its width - which drags it to be flush with your right edge.
With this solution, items can be reordered arbitrarily and no additional calculations need to be made.
I hope this helps!
Update:
Fiddle requiring one hack not dependent on DOM order
Here's what we changed:
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*/
}
What this is doing is making the DOM think these elements have negligible space they're taking up in the document flow, when in reality we're just screwing with its margins to make it display where it was before. This shouldn't fail with an arbitrarily ordered set of elements in an arbitrarily long list. Essentially we're doing something very similar to what float does in removing the element from document flow - but we're only making it reserve space as if it had no height. Plus, it doesn't get dragged to one side of the screen or the other.
The calc(1.2rem + 5px) for margin-top is basically saying: add this margin-bottom we took away back, plus the original 5px margin we had before.
I use rem units here because you don't have any defined font-sizes. Generally, you would want to use em, and we could have here. I chose 1.2 as that's the default line-height for these items. This fix, then, would only work for one line of text in an element. You'll need to have some awareness of the height of the element being rendered in order for this to work.
Hope that helps!
Update, the second
Fiddling with minimal JavaScript
First, add this:
CSS
.right.last {
margin-top: 0;
}
Then add this:
JavaScript
var rights = document.querySelectorAll(".right");
rights[rights.length-1].className += " last";
And you won't see that gap on the last element any longer.
这篇关于是否有可能堆叠无限divs左或右任意没有包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
