Horizontale Scroll-CSS?

Question

Ich möchte eine <div> mit ID haben, die horizontale Bildlauf hat, aber das Problem ist, muss es reagieren, 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="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 http://jsfiddle.net/clairesuzy/FPBWr/

Das Problem ist mit diesem 530px. Ich möchte stattdessen 100% verwenden. Aber dann habe ich Seite Scroll und Scroll der DIV geht richtig, kann es nicht bekommen, keine Ahnung?

hier Artikel in Serbisch über Lösung http://www.blog.play2web.com/index.php?id=18

Answer 1

einfach Ihre Breite auf auto:

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

Auf diese Weise Ihre div kann so breit wie möglich sein ble, so können Sie so viele Kätzchen Bilder wie möglich hinzufügen, 3

Ihre div's Breite wird basierend auf den Kind-Elemente erweitern, die es enthält.

jsFiddle

Answer 2

So stellen Sie sicher, dass Sie box-sizing:border-box; zu Ihrem #myWorkContent hinzufügen.

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

Answer 3

Verwendung max-width statt Breite

max-width:530px;

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

Answer 4

habe ich es auf diese Weise:

* { 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 den Wrapper bei 1000% und zehn Seiten jeweils bei 10%. Ich habe meins eingerichtet, um immer noch "Seiten" zu haben, die jeweils zu 100% aus dem Fenster bestehen (farbcodiert). Sie können acht Seiten mit einem 800% -Wrapper erstellen. Ich schätze, du kannst die Farben weglassen und auf der Seite fortfahren. Ich habe auch einen festen Header eingerichtet, aber das ist nicht notwendig. Hoffe das hilft.

Answer 5

Unten arbeitete für mich.

Höhe & Breite zeigen, dass, wenn Sie 2 solche Kinder, wird horizontal geblättert, da Höhe des Kindes ist größer als die Höhe der übergeordneten Rolle vertikal.

Eltern CSS:

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

Kinder CSS:

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

Um nur horizontal zu bewegen:

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

zu scrollen, um nur vertikal:

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