我正在构建我网站的响应式版本。
虽然我很高兴大多数 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 放在一个容器 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>
关于html - 如果容器 div 较小,则按比例缩小 float div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19000267/