html - 响应式布局，内容包裹侧边栏

Question

正在寻找仅使用 CSS 的响应式布局，其行为类似于所示的图像。该网站有 5 个基本区域。页眉、左侧导航、内容、侧边栏和页脚。到目前为止，除了内容/侧边栏关系之外，我已经完成了所有操作。对于桌面站点，绿色侧边栏 float 在内容区域内并向右移动，当侧边栏结束时，内容将环绕它。在移动网站上，侧边栏移动到内容下方。我遇到的问题是让这种情况发生。我可以让它向左浮动而不包裹，然后移动到内容下方，但让内容包裹侧边栏也很麻烦。有什么指点吗？

Answer 1

这种方法怎么样；

请注意，以下摘录尚未完成，但希望它能为您提供一个好主意:

对于桌面版本: 为了正确显示内容部分中的侧边栏，您可以做的最好的事情就是绝对定位侧边栏部分。像这样:

 #content {
      position: relative; 
 }


 #sidebar {
      position: absolute;
      right: 0px;
      top: 0px;
 }

上面的代码要求“sidebar”被“content”包裹，这将导致以下代码出现问题:

智能手机/平板电脑支持:要在智能手机上完美堆叠所有部分:

 @media screen and (min-width: 0px) and (max-width: 900px)  {

   #navigation, #content, #sidebar, #footer  {
      width: 100%;
      float: left;
      clear: both;
      border-top: 1px solid #ccc;
      margin-top: 20px;
      background: none;
      position: relative;
   }

 }

现在，我们的最后一个问题是“侧边栏”仍然被“内容”包裹。 解决这个问题的几种方法；

1. 使用 JavaScript 根据屏幕宽度将 #sidebar 移入和移出另一个 block 。
2. 引入第二个侧边栏部分(例如#sidebar-mobile)怎么样，它仅在您使用移动设备时才可见。显然，在这种情况下，第一个侧边栏将不可见。