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，它仅在您使用移动设备时可见。显然，在那种情况下，第一个侧边栏将不可见。