div flottantes sans encapsulation CSS

Question

J'ai besoin de créer une seule ligne contenant une quantité variable de divs (flottantes ?) : la dimension du conteneur est fixe, et il est censé ajouter une barre de défilement horizontale si nécessaire, sans jamais s'enrouler.

J'ai essayé ce qui suit, mais cela ne fonctionne pas : il s'enroule à la place.

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

J'ai essayé quelques choses (inline, table-cell, etc.) mais elles ont toutes échoué.

Cela peut-il être fait? Si c'est le cas, comment?

Answer 1

Utilisez display: inline-block au lieu de float et donnez au conteneur 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;
}

Voici un exemple : http://jsfiddle.net/D5hUu/3/

Answer 2

inline ne fonctionnera pas, table-cell devrait fonctionner - voir ce jsFiddle que j'ai fait en réponse à une question similaire :

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

ne fonctionnera pas dans <=ie7 cependant...

Answer 3

Oups, j'ai mal lu la question. Réponse précédente supprimée.

---

sur votre conteneur, white-space: nowrap puis sur les éléments display: inline-block

Violez ici : http://jsfiddle.net/HZzrk/1/