html - 如果容器 div 较小，则按比例缩小 float div

Question

我正在构建我网站的响应式版本。

虽然我很高兴大多数 float 的 div 被迫在屏幕下方，但有一些 div 我需要保持彼此相邻，即使屏幕区域小于这些 div 的总宽度。在这种情况下，我想按比例缩小它们，以便它们适合屏幕。

基本上，这是布局:

[___DIV 1___|___DIV 2___|___DIV 3___]

我想确保当屏幕区域很小时，它们看起来不像:

[___DIV 1___|
___DIV2___|
___DIV3___]

但是他们看起来像:

[div1|div2|div3]

每个 div 都是 float:left;宽度:220px;这三个 div 位于另一个 width:100%;

的容器 div 中

Answer 1

您可以将所有三个 div 放在一个容器 div 中，并且只在容器上设置 float: left。

<div id="container" style="float: left">
    <div id="div1" style="width: 33%">...</div>
    <div id="div2" style="width: 33%">...</div>
    <div id="div3" style="width: 33%">...</div>
</div>
<div id="div4" style="float: left">...</div>