智能页面大小调整答案

【问题标题】：smart page resizing智能页面大小调整
【发布时间】：2010-03-08 16:51:55
【问题描述】：

假设我有一个具有三个固定宽度块的 HTML 页面（如果这很重要，它们的高度可以变化），如图所示：

我想让它的行为如下图所示：当浏览器屏幕宽度减小以至于不能在一行中容纳所有三个块时，第一个块会下降。

有可能实现这样的行为吗？最好只使用 CSS，但任何可行的解决方案都会很棒。

【问题讨论】：

这是网络浏览器的默认行为。
@HotTester：不，不是。如果用户要让他们的 UA 更窄，BLOCK 3 会跳下来，而不是 BLOCK 1。使用 float:left 就像一个 que，last in（代码），首先跳下。

【解决方案1】：

<div style="width: 100%;">
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
    <br style="clear: left;">
</div>

这个有效。你把第 1 块放在最后一个，只让那个浮动左边。

【讨论】：

谢谢，这看起来正是我所需要的。在 Opera 10.10 中默认将第一个块放在底部，而在所有其他浏览器中都可以正常工作，这是完全可以接受的。
不错，虽然它只能在第一个块中始终如一地工作，并且与 IE 几乎不兼容。
@deceze：刚刚检查过，在 IE 中，所有块确实位于一行中。但我仍然认为这对我有用，因为块 2 和 3 可以包装在单个 DIV 中，从而使它们内联定位。

【解决方案2】：

几乎不可能在没有任何 Javascript 技巧的情况下让 first 块下拉。另一方面，使用float: left 制作最右边的一滴很容易。

【讨论】：

+1 是迄今为止唯一一个发现块 1 应该放弃这一事实的答案
我只是希望我能提供一个更好的答案，但这似乎需要大量的自定义 Javascripting。

【解决方案3】：

将 div 与 float:left 和固定宽度值一起使用

        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
3
    </div>        
        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
        2    
    </div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
        1
    </div>

像这样... 我知道第一个会正确，但这是我可以做的最简单的事情，而无需进入 javascript..

【讨论】：

这会使块 3 下降到下一行，而不是块 1
重新修订：这会使块 1 下降，但不是按照 OP 要求的方式。块 1 将浮动到右侧，而不是左侧。
@deceze：是的，我曾考虑过自己使用float:right，但出于这个原因拒绝了它。像你一样，我真的没有看到任何明显的方法可以单独使用 CSS 来做到这一点，所以不幸的是，我只能指出其他人答案中的缺陷。

【解决方案4】：

将这三个块都放在一个div中，并将其宽度设置为100%，当屏幕调整大小时，块会自动排列。

【讨论】：

【解决方案5】：

<div style="width: 100%;">
  <div style="width: 50px; float left;">DIV1</div>
  <div style="width: 50px; float left;">DIV2</div>
  <div style="width: 50px; float left;">DIV3</div>
  <br style="clear: left;" />
</div>

【讨论】：

这会使块 3 下降到下一行，而不是块 1