堆叠css伪元素？

Question

使用尽可能少的标记来实现那些嵌套的方形元素的最佳方法是什么？我知道：在/之后不能在同一个元素上多次堆叠但是这样的结构最好的方法是什么？

一般来说，重建所显示的结构（即使用bootstrap4）也很困难。 Flexbox似乎不是正确的方法？有什么建议吗？

Answer 1

使用bootstrap你可以尝试这样的事情。

＆＃13;

＆＃13;

.red {
border: 1px solid red;
}

.blue {
border: 1px solid blue;
}

.purple {
border: 1px solid purple;
}

.green {
border: 1px solid green;
}

div > div {
height: 100px;
}

div > div > div {
height: 90px;
}

＆＃13;

<div class="container-fluid">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 red">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-xs-offset-4 blue">
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 purple">

            </div>
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 green">

            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 purple">

            </div>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！