web-dev-qa-db-fra.com

Défilement horizontal css?

Je veux en avoir un <div> avec un ID avec défilement horizontal, mais le problème est qu’il doit être réactif et non avec une largeur fixe.

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 alors j'ai obtenu le défilement de la page et le défilement de la DIV va à droite, ne peut pas l'obtenir, aucune idée?

Voici un article en serbe sur la solution http://www.blog.play2web.com/index.php?id=18

htmlcssoverflow
41
Miomir Dancevic

Il suffit de définir 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 afin que vous puissiez ajouter autant d'images de chat que possible; 3

La largeur de votre div se développera en fonction des éléments enfants qu'elle contient.

jsFiddle

91
nkmol

Ci-dessous a fonctionné pour moi.

Hauteur et largeur sont prises pour montrer que, si vous 2 enfants de ce type, il défilera horizontalement, puisque la hauteur de l'enfant est supérieure à la hauteur du parent défiler verticalement.

CSS parent:

.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;
11
Manohar Reddy Poreddy

Assurez-vous simplement d'ajouter box-sizing:border-box; à ton #myWorkContent.

http://jsfiddle.net/FPBWr/160/

1
Giovanni Silveira

utilisez max-width au lieu de width

max-width:530px;

démo: http://jsfiddle.net/FPBWr/161/

0
user1

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 l'emballage à 1000% et dix pages à 10% chacune. J'ai configuré la mienne pour qu'il y ait toujours des "pages" représentant chacune 100% de la fenêtre (code couleur). Vous pouvez faire huit pages avec un wrapper à 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. J'espère que cela t'aides.

0
user3662981