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

首先放置右浮动元素，从float: left;移除width: 100%;和section.main并添加overflow: hidden;：http://jsfiddle.net/mdares/kGkRD/1/

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

Fiddle

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

修复了右侧边栏在响应式网站上的崩溃问题

2 个答案: