html - 使div行水平溢出

Question

我有一排大约有 6 个 div。目前，如果 div 行抑制了页面的宽度，它会将下一个 div 放在其余部分下面，如 this

我的问题是:**我如何拥有一行带有滚动条的水平 div，如 this **

这是我的代码:

<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

你可以包装所有<div class="box">到另一个 div 并添加宽度 px

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