html - 如何使 div 缩小以适应窗口调整大小时的 float ？

Question

我在一个 div 中有两个 float ，带有 display:table 和 margin:auto。将这两个 div 居中效果很好。但是，当我缩小窗口时，其中一个 float 会像它应该的那样下降，但包装器不会缩小到新的大小，因此内部的 float 会向左对齐而不是居中。你如何让它适当收缩？我的意思是，display:table 应该缩小，为什么不缩小？？

这就是我原来的大窗口大小

+----------------+ - div {display:table, margin:auto}
|+-----+  +-----+|
||float|  |float||
|+-----+  +-----+|
+----------------+

缩小浏览器窗口后，div 大小保持不变，而不是缩小以适应新的 float 位置。看起来像这样

+--------------+
|+-----+       |
||float|       |
|+-----+       |
|+-----+       |
||float|       |
|+-----+       |
+--------------+

它应该是这样的

    +-------+
    |+-----+|
    ||float||
    |+-----+|
    |+-----+|
    ||float||
    |+-----+|
    +-------+

关于如何使这项工作有任何想法吗？没有媒体查询有没有办法做到这一点？

这是一个示例代码:http://jsfiddle.net/WerPx/1/ 它在较大的窗口尺寸下按预期工作，但如果您将结果窗口缩小，其中一个浮子会在下方，但绿色 wrapper 不会收缩以适应新尺寸。

Answer 1

看起来你正在尝试制作一个 responsive布局。在您的示例中，您只需将 width: 100% 设置为包装器。但如果设计的标题更复杂(水平导航、页脚、侧边栏...)，那么使用 media queries 是个好主意。 ，像这样:

@media (max-width:800px), projection {
  /* The browser window width must not exceed 800px or this device
     must be projected media for these rules to apply */
 }

@media screen and (min-width: 500px) and (max-width: 800px) 
{ 
   /* style sheet that is usable when the viewport is between 500 
      and 800 pixels wide */
}

进一步阅读:

• Responsive Tutorials and Guidelines在 Smashing 杂志上
• Adaptive layouts with media queries (教程)

编辑: 对于您的代码，这是使用媒体查询的解决方案:http://jsfiddle.net/WerPx/2/