响应式 2 列布局问题答案

【问题标题】：Responsive 2-column layout trouble响应式 2 列布局问题
【发布时间】：2013-11-28 22:39:52
【问题描述】：

我在解决这个难题时遇到了麻烦：我正在使用 2 列布局，其中右列和左列固定宽度，从而占用了剩余空间。两个高度都是可变的。所以是这样的：

<div class="sidebar">sidebar</div>
<div class="main-area">main content</div>

<style>
.sidebar { float: right; width: 250px; }
.main-area { position: relative; overflow: hidden; }
</style>

好的，到目前为止一切都很好。但棘手的问题来了。当达到 750px 的最大宽度时，我正在使用 CSS3 来启用 CSS 更改。我希望侧边栏在下方分解并具有 100% 的宽度（因此它成为主要内容的页脚）。但是，因为在 HTML 代码中，侧边栏 div 必须位于首位，所以它总是出现在主区域上方。

关于如何布局的任何想法？

非常感谢！

【问题讨论】：

sidebar 向右，即在main-area 之后不是 html 代码中的选项？
为什么要求侧边栏出现在 HTML 层次结构中的主要内容之前？除非您自己创建了限制，否则这里没有限制。
其实sidebar可以自动移动到main-area下，如果你把<div class="sidebar">sidebar</div>放在<div class="main-area">main content</div>之后
在 2 列结构中，带有浮动右侧边栏和占据所有剩余空间的主要区域，浮动右侧需要在 html 标记中排在首位。如果我将侧边栏放在主要区域之后，这将不起作用，对吗？
嘿迈克尔。当然，我尝试将主要区域放在侧边栏之前。但是当你这样做时，主区域不会占用剩余空间（窗口宽度 - 侧边栏的 250 像素）。这仅在侧边栏出现在标记中时才有效。当你把 main-area 放在首位时，它会占据 100% 的宽度，因为没有定义宽度。

标签： html css layout responsive-design frontend

【解决方案1】：

HTML：

<section class="container">
    <div class="main-area">main content</div>
    <div class="sidebar">sidebar</div>
</section>

CSS：

.container { 
     position: relative; 
     max-width: 1024px; /* could be width: x% as well*/ 
}

.sidebar { 
     position: absolute; 
     right: 0; top: 0; 
     width: 250px;
}

.main-area { 
     margin-right: 260px; /* sidebar width plus 10px gap */ 
}

@media only screen and (max-width: 750px) {

     .sidebar {
          position: static;
          width: 100%;
     }

     .main-area {
         width: 100%;
         margin-right: 0;
     }

}

【讨论】：

绝对位置很复杂，因为你不知道高度。
您好，感谢您的快速回复。我可能应该明确指出侧边栏在右侧。这就是为什么有一个浮动：对。我不确定您是否在回答我的问题，因为我想要的是当屏幕宽度低于 750 像素时，侧边栏成为主区域宽度为 100% 的页脚。由于侧边栏首先出现在 HTML 标记中，我不知道该怎么做。
这甚至还没有接近回答 OP 的问题。

【解决方案2】：

您的问题的简单答案是否。如果侧边栏位于 HTML 中的内容区域之前，则无法使侧边栏移动到断点中的内容下方。至少...不是没有 javascript 和一堆疯狂的东西。

也就是说...只需将您的侧边栏移动到下方您的主要内容 div。从语义上讲，您没有理由不这样做。

<section class="container">
    <div class="main-area">main content</div>
    <div class="sidebar">sidebar</div>
</section>

但是，需要对 CSS 进行一些更改才能实现此目的。它不像以前那样简单，但也不是特别难。

.container {
    position: relative;
}

.sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
}
.main-area {
    background: red;
    margin-right: 250px;
}

Here is a JSFiddle demonstrating it working.

随意向主内容区域或侧边栏添加不同数量的内容，您会发现两者的高度仍然不同，不会相互干扰。

【讨论】：

我需要主区域来占用侧边栏（容器宽度 - 侧边栏宽度）留下的剩余空间，而不是 100% 的容器。这就是为什么你的建议对我不起作用感谢 767px 的建议，我只是以 750 为例。
@James - 经过一些测试，我意识到我原来的建议是错误的。我已经用一个可行的解决方案编辑了我的答案。

【解决方案3】：

我认为您可以使用 jQuery 实现这一点。

HTML

<div class="main-area"></div>
<div class="sidebar"></div>

CSS

.sidebar{
  background-color: #000;
  height: 200px;
  width: 50%;
}
.main-area{
  position: relative;
  background-color: #ff0000;
  height: 200px;
  width: 50%;
}

jQuery

$(function(){
  $('.sidebar').css('float', 'right');
  $('.main-area').css('float', 'left');

  $(window).resize(function(){
    if($(this).width() <= 750){
        $('.main-area').removeAttr('style');
        $('.sidebar').removeAttr('style');
    }else{
        $('.sidebar').css('float', 'right');
        $('.main-area').css('float', 'left');
    }
  });
});

你可以在这里看到结果 -> jsFiddle

嗯，这就是我的方式。

【讨论】：

【解决方案4】：

我想我在这里找到了答案：http://jsfiddle.net/salman/TPNpy/

<div id="main-area-wrap">
  <div id="main-area">Column 1</div>
</div>
<div id="sidebar">Column 2</div>
<div id="clear"></div>

#main-area-wrap{
    float: left;
    width: 100%;
}
#main-area {
    background-color: cyan;
    margin-right: 200px;
}
#sidebar{
    background-color: lime;
    float: left;
    width: 200px;
    margin-left: -200px;
}

【讨论】：

这基本上就是我刚刚编辑的帖子，但没有浮动：左；关于内容哈哈哈。
是的，你肯定明白了。再次感谢：D