使用嵌套容器创建响应式CSS布局

Question

我得到了以下<div>元素：

<div class="root">
    <div class="mainContainer">
        <div class="menuBarContainer"></div>
        <div class="appBoxContainer"></div>
    </div>
    <div class="sidebarContainer"></div>
</div>

现在，我希望他们安排在我的页面上，如下图所示：

哪种方法可以在CSS中安排<div>？ 我的问题是，即使我将width - 属性设置为100％，这些框也会尝试适合一行。 我希望网站完全响应，sidebarContainer - 元素链接到一个切换其可见性的按钮。

如果侧边栏不可见（mainContainer），我该怎样做才能使root - 元素占据页面的整个宽度（width: 0）？

提前致谢！

Answer 1

查看flexboxes，它们实际上是针对此类桌面应用程序制作的。

.root行.mainContainer，.sidebarContainer

的列方向

对于自适应设计，您可以使用direction将{{1}}隐藏在特定屏幕尺寸以下，甚至取决于设备方向。 或者只需将根Flexbox更改为列方向，即可将其显示在主要内容下方。

Answer 2

如果您将（蓝色）方框设置为display:block，它们应自动清除两侧并按照草图定位;

然后，假设您的侧边栏具有可变宽度，您可以设置

 .mainContainer {width: auto; display:inline-block}