Question

比如说，使用

在视口底部设置了一个样式栏

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会用{{{ 1}}。但这看起来更像是一个黑客...因为所有这些Div的广泛可以是动态的，并且设置1200px或2000px的固定宽度似乎太过分了。

更新：实际上，黑客是一个相对简单的解决方案，无需处理IE 6或7 ...特别是如果我们知道条形宽度不会超过2000px。 / p>

Answer 1

将4个内部div设置为display: inline-block;然后您可以使用white-space: nowrap;。

然后可以移除float。

注意：如果您必须支持IE7及以下版本，请添加以下条件CSS：

<!--[if lte IE 7]>
<style  type="text/css">
    .BottomWrapper div
    {
        display:            inline;
        position:           relative;
        bottom:             0;
    }
</style>
<![endif]-->

在CSS中，如何不将300px宽的Div浮动到下一行？

1 个答案: