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

标签 html css

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

虽然我很高兴大多数 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 放在一个容器 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/

相关文章:

javascript - 如何在使用 document.write 时忽略 HTML 标签

css - 带滚动条的侧边栏菜单隐藏下拉菜单

javascript - 使用 Javascript 的 Bootstrap 列过滤器

html - 页面加载时的随机 Div 顺序

javascript - 找不到变量 : "View"

jquery - ToBootstrap 与容器宽度对齐

html - R Markdown : Putting an image in the top right hand corner of HTML and moving title down

html - 以本地语言显示内容 : R

javascript - CKEditor 中的 HTML 源太小

css - 有没有一种方法可以缩小 css 而不是全部放在一条线上?