在CSS中，如何不浮动一个300像素宽的Div到下一行？ [英] In CSS, how to not float a 300px wide Div to the next line?

问题描述

说，有一个在视口底部使用样式的栏，使用

Say, there is a bar that is styled at the bottom of the viewport, using

position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden

然后在里面有4个Div，每个都浮动在左边。每个Div的宽度约为300像素，或者可以更多（取决于内容）

and then there are 4 Divs inside it, each one floated to the left. Each Div is about 300px wide or can be more (depending on the content)

现在，当窗口宽度为1200像素时，我们看到所有4个Div，窗口被调整为1180像素宽（仅20像素），那么整个300像素宽的Div将消失，因为它浮动到下一行。

Now, when the window is 1200 pixel wide, and we see all 4 Divs, but when the window is resize to be 1180 pixel wide (just 20 pixels less), then the whole 300px wide Div will disappear, because it is "floated" to the next line.

顺便问一下， white-space：nowrap 不会工作，因为这可能与不包含内联内容有关。

By the way, white-space: nowrap won't work as that probably has to do with not wrapping inline content.

Div在这个div内，具有固定宽度为1200px或2000px，以便所有Div将在此内部Div中的同一级别上浮动，外部Div将使用 overflow：hidden 。但这似乎更像是一个黑客......因为所有这些Div的广泛可以是动态的，设置一个固定的宽度1200px或2000px看起来太多的黑客。

I was thinking of putting another Div inside this Div, having a fixed width of 1200px or 2000px, so that all Divs will float on the same level in this inner Div, and the outer Div will cut it off with the overflow: hidden. But this seems more like a hack... since the wide of all those Divs can be dynamic, and setting a fixed width of 1200px or 2000px seems like too much of a hack.

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

Update: actually, is the hack a relatively simple solution, not having to deal with IE 6 or 7... especially if we know the bar won't be more than 2000px wide.

推荐答案

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

Set the 4 inner divs to display: inline-block; Then you can use white-space: nowrap;.

float 可以删除。

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

Note: If you must support IE7 and below, add the following conditional CSS:

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

这篇关于在CSS中，如何不浮动一个300像素宽的Div到下一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！