Machen Sie Zeile von div horizontalen Überlauf

Question

Ich habe eine Reihe von rund 6 divs. Derzeit, wenn die Reihe der divs die Breite der Seite unterdrückt, wie folgt this

Meine Frage ist: ** Wie habe ich eine Reihe von horizontalen divs mit einer Bildlaufleiste wie this *

*

Hier ist mein Code:

<div style="overflow:auto;"> 

    <div class="box"> 
     <span>Example</span> 
     <br> 
     <img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
    </div> 

    <div class="box"> 
     <span>Example</span> 
     <br> 
     <img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
    </div> 

    <div class="box"> 
     <span>Example</span> 
     <br> 
     <img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
    </div> 

    <div class="box"> 
     <span>Example</span> 
     <br> 
     <img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
    </div> 

    <div class="box"> 
     <span>Example</span> 
     <br> 
     <img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
    </div> 

    <div class="box"> 
     <span>Example</span> 
     <br> 
     <img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
    </div> 
</div> 

<style> 
    .box { 
     float: left; 
     width: 127px; 
     margin: 9.2px; 
     border: 5px solid red; 
    } 
</style> 

JSFIDDLE: http://jsfiddle.net/ZrpHv/59/

Answer 1

Sie können alle wickeln <div class="box"> in eine weitere div und fügen Breite in Pixel

.box { 
 
float: left; 
 
width: 127px; 
 
margin: 9.2px; 
 
border: 5px solid red; 
 
}

<div style="overflow:auto;"> 
 
<div style="width: 1000px;"> 
 

 
<div class="box"> 
 
<span>Example</span> 
 
<br> 
 
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
 
</div> 
 

 
<div class="box"> 
 
<span>Example</span> 
 
<br> 
 
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
 
</div> 
 

 
<div class="box"> 
 
<span>Example</span> 
 
<br> 
 
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
 
</div> 
 

 
<div class="box"> 
 
<span>Example</span> 
 
<br> 
 
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
 
</div> 
 

 
<div class="box"> 
 
<span>Example</span> 
 
<br> 
 
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
 
</div> 
 

 
<div class="box"> 
 
<span>Example</span> 
 
<br> 
 
<img src="http://thumb9.shutterstock.com/photos/display_pic_with_logo/59156/113033326.jpg" width="50" height="80" /> 
 
</div> 
 

 

 
</div> 
 
</div>

Answer 2

Bitte versuchen Sie dies:

.parentdiv { 
    overflow-x: scroll; 
    width: 450px; 
    white-space: nowrap; 
    border: 1px solid black; 
} 

.box{ 
    width: 127px; 
    margin: 9.2px; 
    border: 5px solid red; 
    display: inline-block; 
}