带有 nowrap 和溢出隐藏的内联 div答案

【问题标题】：Inline div with nowrap and overflow hidden带有 nowrap 和溢出隐藏的内联 div
【发布时间】：2013-02-18 00:23:28
【问题描述】：

我有一个顶部栏，里面有多个div。它在 Chrome 中按预期工作，但在 Firefox 中，.third div 被包裹在第二行。如何让 Firefox 中的.third div 像 Chrome 一样拥有nowrap？

http://jsfiddle.net/qhoc/C6f4c/

条件如下：

.top 总是有 width:100% 所以它覆盖了整个浏览器窗口
每个内部divs（第一、第二、第三...）都有自己预定义的固定宽度
他们必须留在一行。如果浏览宽度不够，右边的会溢出隐藏（不换行到第二行）。
更喜欢用 css 处理这个问题。 jQuery 应该是最后的手段。

感谢帮助！！

【问题讨论】：

是否因为宽度而被包裹？
@244an，现在确定你指的是哪个“宽度”。但是所有父 div 都应该具有浏览器的最大宽度（100%），而子 div 将具有它们的固定宽度。
我的意思是如果换行是由长文本引起的。但没关系，我看到@Cadence96 解决了它。在嵌套 div 等时，我也在 Firefox 中使用 display: inline-block。

标签： javascript jquery html css stylesheet

【解决方案1】：

从你的内部 div 中移除 float:left 并添加 display:inline-block。这些 div 将充当内联元素，但具有相同的块属性。

http://jsfiddle.net/C6f4c/2/

.top {
  width: 100%; /* this is optional to accomplish your first condition, either you don't need to have inline-block on this element */

}
.top div {
    position: relative;
    /*float: left;*/
    height: 100%;
    display: inline-block;
}

【讨论】：

正要说同样的话。
太棒了。我的转储错误是什么

【解决方案2】：

您是否尝试过使用媒体查询？一旦浏览器达到某个最大宽度等，您可以隐藏 div。

http://css-tricks.com/css-media-queries/

【讨论】：