Question

我希望彼此相邻的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/

Answer 1

请尝试以下操作： LINK

CSS：

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

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

Answer 2

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>

三柱流体页脚将缩小到最小宽度然后下降到下一行

2 个答案: