三列流体页脚，将缩小到最小宽度，然后下降到下一行答案

【问题标题】：Three-column fluid footer that will shrink to min-width then drop to next line三列流体页脚，将缩小到最小宽度，然后下降到下一行
【发布时间】：2014-06-29 06:18:26
【问题描述】：

我想要 3 个彼此相邻的 div，它们均匀地填充其包含的 div。随着屏幕大小的调整，我希望 div 开始缩小，直到达到它们的最小宽度。只有当每个都达到了它们的最小宽度时，它们才应该下降到下一行。

我尝试了几个选项，包括向左和向右的内联块浮动，中间有另一个 div，但就是无法得到我想要的。

这是我目前拥有的一个小提琴：http://jsfiddle.net/mN9qx/1/

HTML：

<div id="footer">
  <div id="address">Bobs Consulting, LLC<br />1234 Oak Street<br /> Union City, NV 122345 </div>   
  <div id="terms">Privacy Statement<br />
  Terms and Conditions<br />
  Copyright 2014.
  </div>
  <div id="def">A bunch of text here. The text should not wrap or condense when the screen resizes.</div>
</div>

CSS：

#footer {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
color:#777;
height:60px;
}

#footer div {
float:left; 
height:50px;
max-width:220px;
width:33%;
padding: 10px 0px 0px 20px;
margin: -1px 0px 0px -1px;
border:1px solid;
border-color:#aaa;
}

#address { min-width:120px; }
#terms { min-width:140px; }
#def { min-width:220px; }

我想要一个 html/css 解决方案。媒体查询也是可以接受的。我可以用 flexbox 做到这一点，但我想要得到尽可能广泛支持的东西。

任何帮助将不胜感激。谢谢。

编辑：我已经退回到 flexbox 技术并决定不支持旧版浏览器。不支持 flexbox 的浏览器将显示垂直堆栈而不是水平堆栈。添加 float:left 将在旧浏览器中显示为水平。 Flexbox 代码可以在这个 jsfiddle 中看到：http://jsfiddle.net/mN9qx/3/

【问题讨论】：

标签： html css responsive-design fluid-layout

【解决方案1】：

jsFiddle:

<html>

<head>
    <style type='text/css'>
        body
        {
            width:100%;
        }

        .footer
        {
            float:left;
            width:33%;
            height:100px;
            min-width:50px;
            background:#ff0000;
            margin:1px;
        }
    </style>
</head>

<body>

    <div class="footer"></div>
    <div class="footer"></div>
    <div class="footer"></div>
</body>
</html>

【讨论】：

这里的问题是我的每个页脚列都有不同的最小宽度。一旦到达最右边 div 的边缘或最小宽度，它就会下降到下一行。我希望其他两个在正确的 div 下降之前继续缩小。这甚至可以用 css 实现吗？
在我的代码中，所有三个都缩小直到达到最小宽度，这回答了“我希望其他两个在正确的 div 下降之前继续缩小” - 除非你没有很好地解释它，你希望它如何出现。我更新了 jsfiddle 以包含不同的最小宽度：jsfiddle.net/7Jua3/1
很抱歉，我没有很好地解释它。在您的 jsfiddle 中，我观察到所有三个 div 都随着窗口的缩小而缩小。在 footer3 div 达到其最小宽度之前，它下降到第一个 div 之下。这三个都继续缩小，直到 footer3 达到它的最小值。其他人继续缩小，直到他们达到他们的最低限度。我想要的是 footer3 不会下降，无论它是否达到了它的最小值，直到所有多余的空间都在 div 中被使用。换句话说，所有人都必须在 footer3 下降之前达到它们的最小宽度。我试图在下降到下一行之前尽可能长时间地保持单行 div。
我现在明白你在找什么了。我希望这个足够接近 - 我认为可以调整到完美。采取 3 - jsfiddle.net/7Jua3/2
减小宽度 % 确实有帮助，但它不适合我的其他设计。我已经调整了一段时间，并得出结论，这对于 CSS2 功能来说是不太可能的。我已经退回到 flexbox 解决方案（在顶部的编辑中描述）。由于您的解决方案最接近我的原始要求，因此我已将其标记为解决方案。非常感谢 Geoff 的帮助。

【解决方案2】：

试试这样：LINK

CSS：

@media (max-width: 480px) {
#footer * {
    clear:both;
    float:none;
    width:100%;.
    display:block;
}    
}

您可以在媒体查询的帮助下根据需要调整任何屏幕尺寸的页脚 div。希望这会有所帮助...

【讨论】：

谢谢，但这不是我想要的效果。我希望左边和中间的 div 在右边的 div 下降到下一行之前开始缩小。只有达到所有的最小宽度时，div 才开始下降。