Satır yatay taşma sırasını yapın

Question

Yaklaşık 6 divs numaralı satıra sahibim. * this gibi bir kaydırma çubuğu ile ben yatay div bir sıra var mı nasıl **: divs satır sayfasının genişliğini bastırır Şu, eğer this

Sorum şu gibi kalanı altında sonraki div koyar

<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

tüm <div class="box"> bir daha div içine sarın ve px

yılında genişliğini ekleyebilir *

İşte benim kod

.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

bu deneyin:

.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; 
}