比如说，视口底部有一个样式栏，使用
position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden
然后里面有4个Div，每个Div都向左浮动。每个 Div 大约 300px 宽或者可以更多（取决于内容）
现在，当窗口为 1200 像素宽时，我们可以看到所有 4 个 Div，但是当窗口大小调整为 1180 像素宽（仅少 20 像素）时，整个 300px 宽的 Div 将消失，因为它是“浮动”的到下一行。
那么如何才能使 Div 保留在那里并显示其自身的 280px，而不是完全消失呢？
顺便一提，white-space: nowrap不起作用，因为这可能与不包装内联内容有关。
我正在考虑在这个Div里面放另一个Div，固定宽度为1200px或2000px，这样所有的Div都会在这个内部Div中浮动在同一水平面上，而外部Div会用overflow: hidden。但这看起来更像是一种 hack...因为所有这些 Div 的宽度都可以是动态的，并且设置 1200px 或 2000px 的固定宽度似乎有点像 hack。
Update:实际上，这个 hack 是一个相对简单的解决方案，不必处理 IE 6 或 7...特别是如果我们知道该栏的宽度不会超过 2000px。
将 4 个内部 div 设置为display: inline-block;然后你可以使用white-space: nowrap;.
The float然后可以将其删除。
注意：如果必须支持IE7及以下版本，请添加以下条件CSS：
<!--[if lte IE 7]>
<style type="text/css">
.BottomWrapper div
{
display: inline;
position: relative;
bottom: 0;
}
</style>
<![endif]-->
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
