web-dev-qa-db-ja.com

CSS非ラッピングフローティングdiv

可変量の（フローティング？）divを含む単一行を作成する必要があります。コンテナーの寸法は固定されており、必要なときに水平スクロールバーを追加し、折り返さないようにする必要があります。

私は次のことを試しましたが、うまくいきません。代わりにラップします。

div#sub {
    background-image:url("../gfx/CorniceSotto.png");
    width:760px;
    height:190px;
}
div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
}
div#sub > div#ranking > div.player {
    float:left;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

いくつかのこと（インライン、テーブルセルなど）を試しましたが、すべて失敗しました。

これはできますか？もしそうなら、どのように？

csshtmlcss3css-float
55
o0'.

つかいます display: inline-blockの代わりにfloatを指定し、コンテナにwhite-space: nowrap。

div#sub > div#ranking {
    position:relative;
    top:42px;
    left:7px;
    width:722px;
    height:125px;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
}
div#sub > div#ranking > div.player {
    display: inline-block;
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}

例： http://jsfiddle.net/D5hUu/3/

106
DanielB

インラインは動作しません、テーブルセルは動作するはずです-同様の質問に答えて作ったこのjsFiddleを参照してください：

http://jsfiddle.net/DxZbV/1/

ただし、<= ie7では動作しません...

5
ptriek

おっと、質問を読み違えました。前の回答は削除されました。

コンテナで、white-space: nowrapそして、エレメントdisplay: inline-block

ここでフィドル： http://jsfiddle.net/HZzrk/1/

3
Mathletics

Edited：DanielBと私の元の答えを組み合わせました。 widthとsubの両方にrankingの代わりにmin-widthを配置し、inline-blockを持つコンテナで要素をwhite-space: nowrapに設定する必要があります。参照： http://jsfiddle.net/5wRXw/3/

Edit 2：目的のために、overflow要素のrankingプロパティをまとめて削除する方がよい場合があります。 http://jsfiddle.net/5wRXw/4/ を参照してください

#sub {
    backgrond-color: yellow;
    min-width:760px;
    height:190px;
}
#ranking {
    position:relative;
    top:42px;
    left:7px;
    min-width:722px;
    height:125px;
    overflow-x:auto; /* you may be able to eliminate this see fiddle above */
    overflow-y:hidden; /* and eliminate this */
    white-space: nowrap; /* like DanielB */
}
#ranking > .player {
    display: inline-block; /* like DanielB */
    width:67px;
    height:120px;
    margin-left:5px;
    background-color:#f3e1bb;
}
0
ScottS