Question

仅使用CSS查找响应式布局，其行为类似于显示的图像。该网站有5个基本区域。标题，左手导航，内容，侧边栏和页脚。到目前为止，我已经完成了内容/侧边栏关系之外的所有事情。对于桌面站点，绿色侧边栏浮动在内容区域内部和右侧，当侧边栏结束时，内容环绕它。在移动网站上，侧边栏移动到内容下方。我遇到的问题是让这件事发生。我可以让它在没有包裹的情况下向左浮动然后移动到内容之下但是获取内容以包裹侧边栏也证明是麻烦的。有什么指针吗？

Full Desktop Image Mobile Site

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;
   }

 }

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

使用JavaScript根据屏幕宽度将#sidebar移入和移出另一个块。
如何引入第二个侧边栏部分，例如＃sidebar-mobile，只有在移动设备上时才能看到。显然，在这种情况下，第一个侧边栏将是不可见的。

Answer 2

这是您的内容区代码。

    <div id="content">
        <div id="sidebar">
         sidebar
        </div>
         content
    </div>
<div id="footer">footer</div>

这也是桌面和设备的CSS。

#content {background:yellow; padding:20px;}
#content p{ margin:0;}
#sidebar {background:green; float:right; padding:10px; margin:0 0 10px 10px;}
#footer{background:#2AABE4;}

@media only screen and (max-width: 420px) {
#sidebar{ float:none; margin:0;}

}

现在我们必须使用jquery的一小部分将#content和#footer之间放在设备中。这里是jquery的代码。

function setlayout(){
    //alert($(window).width())
  if( $(window).width() < 420 ){
    $('#sidebar').insertBefore('#footer');
  } else {
      $('#sidebar').prependTo('#content');
  };
};

$(window).on('resize load', function(){  setlayout() });

上面的代码也适用于窗口调整大小和窗口加载。

当您将浏览器调整到420以下时，它将移动div。您可以根据您的要求修改宽度。

有关工作示例，请访问以下链接。 http://jsfiddle.net/rakeshpersonal/hknBb/

Answer 3

你可以（ab）使用CSS display:table来有效地rearrange divs using just CSS，而不需要任何Javascript。

使用“桌面”视图的初始格式。

在移动视图中（您可以通过CSS3媒体查询激活），将display: table应用于页面上其他所有内容的包装器（或直接应用于body标记）。然后，使用display: table-footer-group将侧边栏和页脚推到底部，并使用float: none删除其浮动属性。

Answer 4

以下是基于您的html就是这样的假设。

<div id="content">
    <div id="sidebar">
    </div>
</div>

对于桌面：

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

移动设备：

#sidebar {
    position: relative;
    margin-top: 16px;
}

您可能需要为内容保持相对位置，才能使其正常工作，但如果没有，可能还有其他解决方案

#content {
    position: relative;
}

响应式布局，内容包含侧边栏

4 个答案: