html - 智能页面调整大小

Question

假设我有一个包含三个固定宽度 block 的 HTML 页面(如果这很重要，它们的高度可以变化)，如图所示:

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

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

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

这个有效。你把 block 1 作为最后一个，只让那个漂浮在左边。