内联div，隐藏了nowrap和溢出

Question

我有一个顶部栏，里面有多个div 。 它可以在Chrome浏览器中按预期工作，但在Firefox中， .third是第二行。 如何使Firefox中的.third拥有类似于Chrome的nowrap ？

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/