Défilement horizontal CSS

J'essaye de créer un <div> avec une série de photos qui sont défilables horizontalement seulement.Défilement horizontal CSS

Cela devrait ressembler à ceci: LINK;

Toutefois, ce qui précède est uniquement obtenu en spécifiant une largeur pour le <div> qui contient les photos (de sorte qu'elles ne soient pas "enveloppantes"). Si je ne mets pas une largeur - ça ressemble à ça; Que puis-je faire en utilisant CSS pour éviter de mettre dans une largeur fixe que les images peuvent varier.

Merci

Source

2012-03-29 Simon R

Vous pouvez utiliser display:inline-block avec white-space:nowrap. Ecrire 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; 
}

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

Source

2012-03-29 13:01:19 sandeep

Cela fonctionne vraiment bien - merci –

@sandeep plz me aider je l'ai utilisé ur qui est en css jsFiddle et supposons certaines données r Cuming dynamiquement par ajax Callin qui stocke dans le bouton qui est en bas de page maintenant comment je peux faire défiler ce bouton pas la seule page de la fenêtre pied de page –

Comment soutenir également le défilement en saisissant une image et en faisant glisser vers la gauche/droite? –

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

Source

2012-03-29 13:04:06 vicky

Bien que ce lien puisse répondre à la question, il est préférable d'inclure les parties essentielles de la réponse ici et de fournir le lien pour référence. Les réponses à lien uniquement peuvent devenir invalides si la page liée change. –

Utilisez ce code pour générer des blocs de défilement horizontal contenu. J'ai obtenu ceci 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>

Source

2014-02-11 17:52:59 FrameWorker

essayez d'utiliser la structure de la table, il est plus compatible retour. Check this out Horizontal Scrolling using Tables

Source

2015-07-02 11:40:46 Subroto

Défilement horizontal CSS

Répondre

Questions connexes