web-dev-qa-db-fra.com

Div flottant non-wrappant CSS

J'ai besoin de créer une seule ligne contenant un nombre variable de divs (flottants?): La dimension du conteneur est fixe et il est supposé ajouter une barre de défilement horizontale si nécessaire, sans jamais envelopper.

J'ai essayé ce qui suit, mais ça ne marche pas: ça enveloppe.

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 solutions (inline, table-cell, etc.) mais elles ont toutes échoué.

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

csshtmlcss3css-float
55
o0'.

Utilisation display: inline-block au lieu de float et donne le 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/

106
DanielB

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

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

ne fonctionnera pas dans <= ie7 si ...

5
ptriek

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

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

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

3
Mathletics

Edité : Combinaison de DanielB et de ma réponse originale. Vous devez mettre min-width au lieu de width pour sub et ranking et avoir les éléments définis sur inline-block avec un conteneur ayant white-space: nowrap. Voir: http://jsfiddle.net/5wRXw/3/

Edit 2 : Pour vos besoins, il serait peut-être préférable d'éliminer toutes les propriétés overflow de l'élément ranking. . Voir 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