Html 三列流体页脚，将缩小到最小宽度，然后下降到下一行
我希望3个div彼此相邻，均匀填充其包含的div。随着屏幕大小的调整，我希望div开始缩小，直到达到最小宽度。只有当每一个都达到其最小宽度时，它们才能下降到下一行Html 三列流体页脚，将缩小到最小宽度，然后下降到下一行,html,css,responsive-design,fluid-layout,Html,Css,Responsive Design,Fluid Layout,我希望3个div彼此相邻，均匀填充其包含的div。随着屏幕大小的调整，我希望div开始缩小，直到达到最小宽度。只有当每一个都达到其最小宽度时，它们才能下降到下一行 我已经尝试了几种选项，包括向左和向右的内嵌块浮动，中间有另一个div，但不能得到我所要查找的。 以下是我目前拥有的一把小提琴： HTML: 我想要一个html/css解决方案。也可以接受媒体查询。我可以用flexbox来实现，但我希望得到尽可能广泛的支持 任何帮助都将不胜感激。谢谢 编辑：我已经回到flexbox技术，并决定不支持较旧
我已经尝试了几种选项，包括向左和向右的内嵌块浮动，中间有另一个div，但不能得到我所要查找的。
以下是我目前拥有的一把小提琴： HTML: 我想要一个html/css解决方案。也可以接受媒体查询。我可以用flexbox来实现，但我希望得到尽可能广泛的支持 任何帮助都将不胜感激。谢谢 编辑：我已经回到flexbox技术，并决定不支持较旧的浏览器。不支持flexbox的浏览器将显示垂直堆栈，而不是水平堆栈。在较旧的浏览器中，添加float:left将显示为水平。Flexbox代码可以在这个JSFIDLE中看到：像这样尝试： CSS: 在媒体查询的帮助下，您可以根据需要调整任何屏幕大小的页脚div。希望这有助于 ：谢谢，但这不是我想要的效果。我希望在右div下降到下一行之前，左div和中div开始收缩。只有当达到所有的最小宽度时，div才会开始下降。这里的问题是我的每个页脚列都有不同的最小宽度。一旦到达最右侧div的边缘或最小宽度，它将下降到下一行。我希望其他两个在右div下降之前继续收缩。在我的代码中，所有三个都会收缩，直到达到最小宽度，这就回答了我希望其他两个在正确的div下降之前继续收缩的问题-除非你没有很好地解释它，你希望它如何显示。我更新了JSFIDLE以包含不同的最小宽度：很抱歉，我没有很好地解释它。在您的JSFIDLE中，我观察到所有三个div都随着窗口的缩小而缩小。在footer3分区达到其最小宽度之前，它会下降到第一个分区以下。所有三个分区都会继续缩小，直到footer3达到其最小宽度。其他分区会继续缩小，直到它们达到其最小宽度。我想要的是，footer3不会下降，无论它是否达到其最小宽度，直到分区中使用了所有多余的空间。换句话说，在footer3下降之前，所有的都必须达到其最小宽度。我试着在跳到下一排之前尽可能长地握住一排div。我现在明白你们在找什么了。我希望这一个是足够接近-可以调整到完美，我想。以3为例-减少宽度%当然有帮助，但它不适合我的其他设计。我已经调整了一段时间，现在已经得出结论，这是不太可能与CSS2功能。我回到了顶部编辑中描述的flexbox解决方案。由于您的解决方案最接近我的原始请求，我已将其标记为解决方案。非常感谢你的帮助，杰夫。
<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>
#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; }
@media (max-width: 480px) {
#footer * {
clear:both;
float:none;
width:100%;.
display:block;
}
}
<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>