css - 使列流动到最小宽度，然后将 float 侧边栏向下推

Question

假设您有两个 div:一个具有最小宽度的流动宽度和另一个向右浮动的 div。比如这个live demo (with code) at jsbin.com有这个:

<div id="container">
  <div id="header">header</div>
  <div id="fixedFloatingColumn">fixed-size column<br />o<br />o<br />o<br />o</div>
  <div id="fluidNonfloatingColumnContainer">
    <div class="column">stretchable column 1</div>
    <div class="column">stretchable column 2</div>
    <div class="column">stretchable column 3</div>
  </div>
  <div id="footer">footer</div>
</div>

如果您调整浏览器的大小并使其变窄，流体 div 会相应调整，直到达到最小宽度。之后，如果您进一步缩小窗口，则会出现水平滚动条，右侧 float 的 div 开始溢出并隐藏在窗口右侧。

我想要的是，如果用户不断缩小窗口，在非 float div 达到最小宽度后，浏览器应该将 float 侧边栏 div 向下推到非 float 内容下方，而不是溢出 (隐藏)向右。这可能吗？

Answer 1

我相信，如果您愿意使用媒体查询。关于如何进行“响应式网页设计”的简短入门，我会先看看这个 article伊桑·马科特 (Ethan Marcotte)。 Simon Collison 的网站非常棒example我认为你正在努力完成的事情。