智能页面调整大小

Question

假设我有一个包含三个固定宽度块的HTML页面（如果这很重要，它们的高度会有所不同），如图所示：

我想让它的行为如下图所示：当浏览器屏幕宽度减小，因此无法将所有三个块放在一行中时，第一个块会关闭。

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

Answer 1

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

Answer 2

<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块作为最后一个，只留下一个浮动。

Answer 3

使用带浮点数的div：左和固定宽度值

        <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 ..

Answer 4

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

Answer 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>