CSS de défilement horizontale

Je suis en train de créer un <div> avec une série de photos qui sont à défilement horizontal uniquement.

Il devrait ressembler à quelque chose comme ceci LIEN;

Cependant, le ci-dessus ne s'atteint que par la spécification d'une largeur pour le <div> qui contient les photos (de sorte qu'ils ne sont pas "word-wrap'). Si je ne mets pas une largeur - il ressemble à ceci;LIEN

Ce que je peux faire à l'aide de CSS pour éviter de mettre une largeur fixe comme les images peuvent varier.

Grâce

InformationsquelleAutor Simon R | 2012-03-29
  1. 94

    Vous pouvez utiliser display:inline-block avec white-space:nowrap. Écrire comme ceci:

    .scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

    Cochez cette http://jsfiddle.net/YbrX3/

    • Cela fonctionne vraiment bien merci
    • plz aidez moi j'ai utilisé ur css qui est dans jsfiddle et suppose que certaines données r cuming dynamiquement en ajax callin qui est stocker dans le bouton dans le pied de page maintenant, comment je peux faire défiler que pas le bouton de la fenêtre de page pied de page
    • Comment également en charge le défilement en cliquant sur une image et en la faisant glisser à gauche/à droite?
    • white-space:nowrap était la réponse pour moi.
    InformationsquelleAutor sandeep
  2. 3

    vérifier ce lien
    ici, je change display:inline-block
    http://cssdesk.com/gUGBH

    • Alors que ce lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements.
    InformationsquelleAutor vicky
  3. 0

    Utiliser ce code pour générer le défilement horizontal des blocs de contenu. J'ai obtenu ce à partir d'ici http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html

    <html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>
    InformationsquelleAutor FrameWorker
  4. 0

    essayez d'utiliser le tableau de la structure, il est de plus en plus compatible.
    Check this outLe Défilement Horizontal à l'aide de Tableaux

    InformationsquelleAutor Subroto