html元素浮动到最右侧,CSS左右浮动，具有任意顺序的HTML元素，没有间隙

我有一个涉及绝对定位的解决方案。根据W3.org，有一种叫做

toggle()

的东西正在进行中。

现在，我们陷入了这样的困境：

.lefties, .righties{

top: 10px;

width: 40%;

height: 100px;

position: absolute;

}

.lefties {

background: #DEF;

left: 10px;

}

.righties {

background-color: #FED;

right: 10px;

}

.lefties ~ .lefties,

.righties ~ .righties{

transform: translate(0px, 100px);

}

.lefties ~ .lefties ~ .lefties,

.righties ~ .righties ~ .righties{

transform: translate(0px, 200px);

}

.lefties ~ .lefties ~ .lefties ~ .lefties,

.righties ~ .righties ~ .righties ~ .righties{

transform: translate(0px, 300px);

}

.lefties ~ .lefties ~ .lefties ~ .lefties ~ .lefties,

.righties ~ .righties ~ .righties ~ .righties ~ .righties{

transform: translate(0px, 400px);

}

.lefties ~ .lefties ~ .lefties ~ .lefties ~ .lefties ~ .lefties,

.righties ~ .righties ~ .righties ~ .righties ~ .righties ~ .righties{

transform: translate(0px, 500px);

}

Test 1

Test 2

Test 3

Test 4

Test 5

Test 6

Test 7

Test 8

Test 9

Test 10

Test 11

Test 12

但是用

toggle()

，看起来我们可以清理.lefties~.lefties~.lefties~。。。看起来像这样：

.lefties ~ .lefties,

.righties ~ .righties{

transform: translate(0px, toggle(100px,200px,300px,400px,...));

}