CSS de défilement Horizontal?
Je veux en avoir un <div> avec id qui a un défilement horizontal, mais le problème est qu'il doit être réactif, pas avec une largeur fixe.
css prettyprint-override">html, body {margin: 0; padding: 0;}
#myWorkContent{
width:530px;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#myWorkContent a {
display: inline-block;
vertical-align: middle;
}
#myWorkContent img {border: 0;}
<div id="myWorkContent">
<a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
<a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>
<a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>
<a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>
<a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>
<a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
</div><!-- end myWorkContent -->
Merci à http://jsfiddle.net/clairesuzy/FPBWr/
Le problème est avec ce 530px. Je voudrais utiliser 100% à la place. Mais je suis la page de défilement et le défilement de la DIV va à droite, ne peut pas l'obtenir, une idée?
Voici un article en Serbe sur solution http://www.blog.play2web.com/index.php?id=18
5 réponses
Définissez simplement votre largeur sur auto:
#myWorkContent{
width: auto;
height:210px;
border: 13px solid #bed5cd;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
De cette façon, votre div peut être aussi large que possible, de sorte que vous pouvez ajouter autant d'images de chat que possible; 3
La largeur de votre div se développera en fonction des éléments enfants qu'il contient.
Ci-dessous a travaillé pour moi.
Height & width sont prises pour montrer que, si vous 2 ces enfants, il défilera horizontalement, puisque la hauteur de l'enfant est supérieure à la hauteur du défilement parent verticalement.
Parent CSS:
.divParentClass {
width: 200px;
height: 100px;
overflow: scroll;
white-space: nowrap;
}
Enfants CSS:
.divChildClass {
width: 110px;
height: 200px;
display: inline-block;
}
Pour faire défiler horizontalement uniquement:
overflow-x: scroll;
overflow-y: hidden;
Pour faire défiler verticalement uniquement:
overflow-x: hidden;
overflow-y: scroll;
Assurez-vous d'ajouter box-sizing:border-box; votre #myWorkContent.
Je l'ai compris de cette façon:
* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }
.red { background: red }
.blue { background: blue }
.yellow { background: yellow }
.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }
<div class="header red"></div>
<div class="wrapper">
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
<div class="page yellow"></div>
<div class="page blue"></div>
</div>
J'ai le wrapper à 1000% et dix pages à 10% chacune. J'ai mis le mien pour avoir encore des "pages" avec chacune étant 100% de la fenêtre (code couleur). Vous pouvez faire huit pages avec un wrapper de 800%. Je suppose que vous pouvez laisser de côté les couleurs et avoir sur la page continue. J'ai également mis en place un en-tête fixe, mais ce n'est pas nécessaire. Espérons que cette aide.