下面的div如何与下面的CSS模式保持一致

我有一个容器（boxContainer），在这个容器中，我有六个其他的div，我试图让它们看起来如下编辑CSS样式，但我只是没有找到一种方法让它看起来像假装

<div id="boxContainer">
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>
    <div id="box6"></div>
</div>

---

唯一的方法是 请添加以下样式

#boxContainer #box1, #boxContainer #box5, #boxContainer #box6 {
    border: 1px dashed;
    display: inline-block;
    width: 100%;
}
#boxContainer #box2 {
    border: 1px dashed;
    float: left;
    height: 100px;
    width: 15%;
}
#boxContainer #box3, #boxContainer #box4 {
    border: 1px dashed;
    float: right;
    height: 50px;
    width: 85%;
}

---

希望这会有所帮助，额外的包装箱高度可以更改。我没有遵循确切的宽度/高度

您可以发布您尝试的代码吗？如果没有至少一个，甚至可能两个额外的包装div，您几乎肯定无法处理此问题。感谢您的回答，我成功地用您的解决方案解决了问题。再次感谢，很抱歉，我没有回复您。