divの行を水平オーバーフローにします。

Question

私は約6 divsの行を持っています。現在、divの行がページの幅を抑制している場合は、this

のように残りのdivを配置します。私はthisのようなスクロールバーを使って水平divを作成します。 *

ここに私のコードです：

<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

あなたは1つの以上のdivにすべての<div class="box">をラップし、ピクセルの幅を追加することができます

.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

これを試してください：

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