Question

我在解决这个难题时遇到了问题：我使用的是带有固定宽度右列和左列的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>

好的，所以到这里一切都很好。但是这里有点棘手。我使用CSS3在达到最大宽度750px时启用css更改。我希望侧边栏在下面分解并具有100％的宽度（因此它成为主要内容的页脚）。但是，因为在HTML代码中，侧边栏div必须是第一个，它总是出现在主区域上方。

关于如何解决这个问题的任何想法？

非常感谢！

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

}

Answer 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.

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

Answer 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');
    }
  });
});

你可以在这里看到结果 - ＆gt; jsFiddle

嗯，这是我的方式。

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

响应式2列布局问题

4 个答案: