force float:left divs pour ne pas aller à la ligne suivante

permet de dire que j'ai eu 20 même balise div avec la propriété float:left et une certaine largeur. Je veux qu'ils soient dans une ligne et si ils ne rentrent dans l'écran juste pour faire la page de défilement horizontale.

violon

OriginalL'auteur Adarchy | 2012-10-16

  1. 20

    Qui est fondamentalement la façon dont les flotteurs de travail. Si vous souhaitez que le décrit le comportement que vous pouvez faire autre chose à la place, par exemple white-space: nowrap; sur le conteneur et display: inline-block; au lieu de flotter.

    http://jsfiddle.net/NPzsV/3/

    .container {
    white-space: nowrap;
}
.line {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    white-space: normal;
}

    Une chose à noter cependant: avec cette approche, les retours à la ligne/espaces/tabulations entre les divs provoquera un espace entre eux dans le rendu.

    C'est ça, merci. Je veux dire, white-space: nowrap; ne peut pas être attribué à corps pour ne pas détruire tout le reste de la structure de la page, seul un récipient. Mais il fonctionne. je vous remercie.
    Oui, je viens d'avoir le corps là, parce que c'était le conteneur dans la démo 🙂

    OriginalL'auteur xec

  2. 2

    Utilisation display: inline-block au lieu de float: left sur les divs, et l'ajout de la propriété white-space: nowrap de son conteneur parent.

    Démo: http://jsbin.com/akiniv/1/edit

    Démo avec votre violon 😉 http://jsfiddle.net/NPzsV/4/

    il fonctionne, je vous remercie. La seule chose que je besoin de dire qu'il a besoin d'ajouter white-space: normal à l'intérieur du contenu divs pour éviter d'afficher le contenu lui-même dans une ligne
    Oui, les éléments enfants héritent (la plupart) des propriétés de leurs parents. Bien sûr, vous pouvez remplacer ce comportement comme nécessaire.

    OriginalL'auteur tuff

  3. 0

    régler la hauteur de la div parent, et l'ajout de la propriété overflow:scroll

    <div class="parentDiv"> 
    <div class="line">ddd</div>
    <div class="line">ddd</div>
    <div class="line">ddd</div>
     ...
</div>

    et css:

    .parentDiv{height:50px; overflow: scroll;}
    Merci pour l'aide, mais je l'ai vérifié dans le violon et il ne faut pas travailler. Et de toute façon je veux de la page pour faire défiler, pas de la div.

    OriginalL'auteur Majid Laissi

  4. 0

    Un hard largeur de l'élément parent:

     body{ width:8000px; }

    Démo

    Qui downvoted? Cela fonctionne bien. Maintenant peut-être pas ce que l'OP veut, mais si il veut la fenêtre du navigateur pour faire défiler certes cela fonctionne.
    merci pour l'essayer, mais je veux qu'il à l'air professionnel, et si 8000px wouldnt être assez? 80 000? 800 000? Et la récompense pour ceux qui ont défilé tout en utilisant molette de la souris? 🙂 Juste pour dire.
    Je suis très confus. Vous avez demandé "[divs] à être dans une ligne et si ils ne rentrent dans l'écran juste pour faire la page de défilement à l'horizontale". Je suis heureux de l'aider, mais s'il vous plaît décrire ce que vous voulez vraiment.
    Cette approche a le mérite, en ce sens qu'elle fonctionne pour certains, de ce qu'il veut.

    OriginalL'auteur bookcasey