Horizontales Scroll-CSS?

Lesezeit: 4 Minuten

Benutzer-Avatar
Miomir Dancevic

Ich möchte einen haben <div> mit id, die einen horizontalen Bildlauf hat, aber das Problem ist, dass es reaktionsfähig sein muss, nicht mit fester Breite.

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="https://stackoverflow.com/questions/19256982/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 -->

Dank an http://jsfiddle.net/clairesuzy/FPBWr/

Das Problem ist mit diesen 530px. Ich möchte stattdessen 100% verwenden. Aber dann habe ich das Scrollen der Seite und das Scrollen des DIV geht richtig, kann es nicht verstehen, eine Idee?

Hier ist ein serbischer Artikel über die Lösung
http://www.blog.play2web.com/index.php?id=18

Benutzer-Avatar
nmol

Stellen Sie einfach Ihre Breite auf automatisch:

#myWorkContent{
    width: auto;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

Auf diese Weise kann Ihr Div so breit wie möglich sein, sodass Sie so viele Kätzchenbilder wie möglich hinzufügen können ;3

Die Breite Ihres div wird basierend auf den darin enthaltenen untergeordneten Elementen erweitert.

jsFiddle

  • +1. Das Problem war, dass die DIV-Grenze zu 100% hinzugefügt wurde. “auto” ist der richtige Weg, es zu tun.

    – Roko C. Buljan

    8. Oktober 2013 um 19:59 Uhr

  • Es hängt davon ab, ob. width: auto; wird auf weniger als 100 % angepasst, wenn nicht genügend Inhalt vorhanden ist. Wenn er es will stets Breite 100% sein, sollte er einstellen box-sizing Eigentum, gemäß meiner Antwort unten.

    – Giovanni Silveira

    8. Oktober 2013 um 22:26 Uhr

Unten hat bei mir funktioniert.

Höhe und Breite werden verwendet, um zu zeigen, dass bei zwei solchen untergeordneten Elementen horizontal gescrollt wird, da die Höhe des untergeordneten Elements größer ist als die Höhe des übergeordneten Elements, das vertikal gescrollt wird.

Übergeordnetes CSS:

.divParentClass {
    width: 200px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
}

Kinder-CSS:

.divChildClass {
    width: 110px;
    height: 200px;
    display: inline-block;
}

Nur horizontal scrollen:

overflow-x: scroll;
overflow-y: hidden;

Nur vertikal scrollen:

overflow-x: hidden;
overflow-y: scroll;

Stellen Sie einfach sicher, dass Sie hinzufügen box-sizing:border-box; zu deinem #myWorkContent.

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

  • In diesem Beispiel würde ich ersetzen height:210px; mit height:auto; auch, damit die Bilder nicht abgeschnitten werden.

    – Giovanni Silveira

    8. Oktober 2013 um 20:30 Uhr

Verwenden Sie max-width anstelle von width

max-width:530px;

Demo:http://jsfiddle.net/FPBWr/161/

Ich habe es mir so vorgestellt:

* { 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>

Ich habe den Umschlag bei 1000 % und zehn Seiten bei jeweils 10 %. Ich habe meine so eingerichtet, dass sie immer noch “Seiten” hat, von denen jede 100% des Fensters ist (farbcodiert). Sie können acht Seiten mit einem 800 %-Wrapper erstellen. Ich denke, Sie können die Farben weglassen und auf der nächsten Seite haben. Ich habe auch einen festen Header eingerichtet, aber das ist nicht notwendig. Hoffe das hilft.

1225940cookie-checkHorizontales Scroll-CSS?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy