css - 如何在左侧和右侧堆叠 div 内的元素？

Question

我将我的元素放在一个 div 中，如下所示:

<div>
    <p class="left"> left side element 1 </p>
    <p class="right"> right side element 1 </p>
    <p class="left"> left side element 2 </p>
    <p class="left"> left side element 3 </p>
    <p class="right"> right side element 2 </p>
</div>

我怎样才能让它们根据它们的类别左右堆叠？
注意:HTML 是从服务器端生成的。

预期输出:

[ left side element 1 ]     [ right side element 1 ]
[ left side element 2 ]     [ right side element 2 ]
[ left side element 3 ]     

我试过先使用 float，它们并没有堆叠在其他的之上。然后尝试相对于他们的 parent 对 child 进行绝对定位，但是写每个元素 left right 和 top bottom< 让我很痛苦 值。他们是一种简单的方法吗？

Answer 1

您可以使用 flex 属性 order 和容器上的伪元素的小技巧来实现此设计，以强制在正确的元素上换行

.container {
    width: 400px;
    height: 600px;
    border: solid 1px green;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.container::before {
    content: '';
    width: 5px;
    background-color: red;
    display: inline-block; /* needed only by IE */
    order: 150;
    flex-basis: 100%;
}

.left {
    order: 100;
}

.right {
    order: 200;
}

p {
    background-color: lightblue;
    width: 50%;
}

<div class="container">
    <p class="left"> left side element 1 </p>
    <p class="right"> right side element 1 </p>
    <p class="left"> left side element 2 </p>
    <p class="left"> left side element 3 </p>
    <p class="right"> right side element 2 </p>
</div>

当然，红色伪元素不应该在生产代码中可见。为了演示目的，我让它可见。

这里的关键问题是伪元素可以设置 order 属性(旧浏览器中不会发生这种情况)