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

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

CSS

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

Fiddle

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