javascript - 带有 nowrap 和溢出隐藏的内联 div

Question

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

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

以下是条件：

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

帮助是感激！

Answer 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;
}

Answer 2

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

更多在这里：

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