html - 修复了响应式站点上右侧边栏折叠的问题

Question

我有一个 2 列站点：左列是流动的，右列是固定的。当我缩放浏览器以查看站点如何响应时，右列似乎折叠在左列下方。我不希望这个右栏倒塌。我希望左主列随着站点的缩小而流畅地收缩。

这是我的代码的基础知识：http: //jsfiddle.net/kGkRD/

<section class="main">
    Left
</section>

<aside class="sidebar">
    Right
</aside>

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
section.main {
    float: left;
    max-width: 300px;
    width: 100%;
    background-color: red;
}
aside.sidebar {
    float: right;
    width: 200px;
    background-color: blue;
}

Answer 1

首先放置您的右侧浮动元素，从and 中删除float: left;并添加：http: //jsfiddle.net/mdares/kGkRD/1/width: 100%;section.mainoverflow: hidden;

HTML：

<aside class="sidebar">
    Hello World
</aside>
<section class="main">
    Hello World
</section>

CSS：

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
section.main {
    max-width: 300px;
    background-color: red;
    overflow: hidden;
}
aside.sidebar {
    float: right;
    width: 200px;
    background-color: blue;
}

更新：我理解正确吗，您正在寻找这个：http: //jsfiddle.net/mdares/kGkRD/4/

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
section.main {
    max-width: 300px;
    width: 100%;
    background-color: red;
    overflow: hidden;
    float: left;
}
aside.sidebar {
    float: left;
    width: 200px;
    background-color: blue;
}

如果是这样，你只是想念你的overflow: hidden;

更新 2：要解决您的评论，请尝试以下操作：http: //jsfiddle.net/mdares/kGkRD/5/

CSS：

body {
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
#container {
    position: relative;
    width: 100%;
}
section.main {
    max-width: 300px;
    width: 100%;
    background-color: red;
    overflow: hidden;
        float: left;
}
aside.sidebar {
    width: 200px;
    background-color: blue;
    position: absolute; 
    right: 0;
}

@media screen and (max-width: 350px) {
    aside.sidebar {
    position: static;
    float: left;
    }
}

HTML：

<div id="container">
  <section class="main">
    Hello World
  </section>
  <aside class="sidebar">
    Hello World
  </aside>
</div>

Answer 2

<aside class="sidebar">
    Hello World
</aside>
<section class="main">
    Hello World123
</section>

CSS

@media (max-width:500px){
section.main {
    //display:block;
    float:right;
}
}

小提琴

编辑：请使用更新的 CSS。尝试使用display:block和float:right。