使用嵌套容器创建响应式 CSS-Layout

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 元素链接到一个切换其可见性的按钮。

当侧边栏不可见 (width: 0) 时，如何使 mainContainer 元素占据页面的整个宽度 (root)？

提前致谢！

Answer 1

查看 flexboxes，它们实际上是为类似桌面应用程序的布局制作的。

行 direction 用于 .root，列方向用于 .mainContainer

对于响应式设计，您可以使用 media queries 将 .sidebarContainer 隐藏在特定屏幕尺寸以下，甚至取决于设备方向。或者简单地将根 flexbox 更改为列方向以将其显示在主要内容下方。

Answer 2

如果您将（蓝色）框设置为 display:block，它们应该会自动清除两侧并像您的草图一样定位；

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

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

使用嵌套容器创建响应式 CSS-Layout

Creating responsive CSS-Layout with nested containers

html

css

web