1

假设您有两个 div：一个具有流体宽度和最小宽度，另一个 div 向右浮动。例如，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 会相应调整，直到达到最小宽度。之后，如果进一步缩小窗口，就会出现水平滚动条，右侧浮动 div 开始溢出，隐藏在窗口右侧。

我想要的是，如果用户不断缩小窗口，在非浮动 div 达到最小宽度后，浏览器应该将浮动侧边栏 div 推到非浮动内容下方，而不是溢出（隐藏）到正确的。那可能吗？

4

1 回答 1

1

如果您愿意使用媒体查询，我相信如此。对于如何进行“响应式网页设计”的简短入门，我将从查看Ethan Marcotte的这篇文章开始。Simon Collison 的网站是我认为您正在努力完成的一个很好的例子。

于 2011-07-06T05:10:53.393 回答