代码之家 › 专栏 › 技术社区 › nonopolarity

在CSS中,如何不将300px宽的DIV浮动到下一行?

width css-float html css

nonopolarity · 技术社区 · 14 年前

例如,在视区的底部有一个条形图,使用

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

然后里面有4个凹处,每个都向左边浮动。每个分区的宽度约为300px或更大(取决于内容)

现在,当窗口宽1200像素,我们看到所有4个div,但当窗口调整到1180像素宽(仅少20像素),那么整个300px宽的div将消失,因为它“浮动”到下一行。

那么,怎样才能让DIV保持在那里,显示280px的自身,而不是完全消失呢?

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

我想在这个分区中再放一个分区,固定宽度为1200像素或2000像素,这样所有分区都将在这个内部分区中的同一水平面上浮动,外部分区将用 overflow: hidden . 但这看起来更像一个黑客…因为所有这些div的宽度都是动态的,设置固定宽度为1200 px或2000 px似乎太过简单了。

更新: 实际上,黑客是一个相对简单的解决方案,不需要处理IE6或7…特别是如果我们知道酒吧的宽度不会超过2000像素。

1 回复 | 直到 12 年前

Brock Adams 14 年前

将4个内部分隔符设置为 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]-->

推荐文章

H. Saleh · 浮动:左:溢出时项目消失

7 年前

Christine · 菜单项向左和向下浮动

7 年前

MyDaftQuestions · 如何强制HTML元素左对齐而不换行

7 年前

JBH · 如何防止对象缠绕浮动图像?

7 年前

Joe Harvey · Div隐藏在Chrome中

7 年前

Rusletov · 使元素与浮动元素的边界相邻

7 年前

Lion King · 使用“float”时会出现不需要的空格

7 年前

Ashley · CSS浮动设置为右,但左浮动[重复]

8 年前

JDS · 如何使两个图像按钮超链接并排占据全屏?

8 年前

Russel Riehle · 如何基于父项的右边缘打开超出的子菜单区域?

8 年前