0

div内部に複数のトップバーがあります。Chrome では期待どおりに動作しますが、Firefox では.thirddiv が 2 行目にラップされます。.thirdFirefox の div をnowrapChrome のようにする方法は?

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

条件は次のとおりです。

  1. .topwidth:100%ブラウザウィンドウ全体を覆うように常に持っています
  2. 各内側divs(1 番目、2 番目、3 番目...) には、独自の事前定義された固定幅があります。
  3. それらは一列に並んでいる必要があります。また、ブラウズ幅が十分でない場合、右側のものはオーバーフローで非表示になります (2 行目に折り返されません)。
  4. これを css で処理することをお勧めします。jQuery は最後の手段にする必要があります。

助けていただければ幸いです!!

4

2 に答える 2

2

内側の 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;
}
于 2013-02-18T00:49:57.297 に答える
1

メディアクエリを使用してみましたか? ブラウザが特定の最大幅などに達すると、div を非表示にすることができます。

詳細はこちら：

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

于 2013-02-18T00:42:21.690 に答える