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

发布于 2024-09-04 15:37:07 字数 704 浏览 6 评论 0原文

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

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

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

现在，当窗口为 1200 像素宽时，我们可以看到所有 4 个 Div，但是当窗口大小调整为 1180 像素宽时（仅少 20 像素），那么整个300px宽的Div就会消失，因为它“浮动”到了下一行。

那么如何才能使 Div 保留在那里并显示其自身的 280px，而不是完全消失呢？

顺便说一下，white-space: nowrap 不起作用，因为这可能与不包装内联内容有关。

我正在考虑在这个 Div 里面放另一个 Div，固定宽度为 1200px 或 2000px，这样所有的 Div 都会浮动在这个内部 Div 的同一水平上，而外部 Div 会用 overflow 将其截断：隐藏。但这看起来更像是一种黑客……因为所有这些 Div 的宽度都可以是动态的，并且设置 1200px 或 2000px 的固定宽度似乎太过黑客。

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

原文

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

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)

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.

So how can this be made so that, the Div will stay there and showing 280px of itself, rather than totally disappear?

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

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.

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

薄情伤 2024-09-11 15:37:07

将 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]-->

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

The float can then be removed.

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]-->

回复收藏 0 原文

~没有更多了~