Question

在下面的代码中我有3张图片。我想将容器的宽度限制在300px。当图像总数超过此宽度时，我想让用户水平滚动以显示图像。然而，我的代码导致图像包装。这是小提琴：

http://jsfiddle.net/AndroidDev/Asu7V/10/

<div style="width:300px; overflow-x: scroll">
    <div style="">
        <div class="x">
            <img src="http://25.media.tumblr.com/avatar_dae559818d30_128.png" />
        </div>
        <div class="x">
            <img src="http://scottsdalepethotel.com/wp-content/uploads/et_temp/cat-648150_128x128.jpg" />
            <img src="http://playgo.ro/wp-content/themes/play3.0/play.png" style="position:absolute; left:0; top:0" />
        </div>
        <div class="x">
            <img src="http://blog.sureflap.com/wp-content/uploads/2011/11/Maru.jpg" />
        </div>
    </div>
</div>

Answer 1

在父元素上使用white-space: nowrap;，如果元素不符合父width，则会强制元素不结束。我已将overflow-x: scroll;更改为overflow-x: auto;，以便在图片未超出父元素时不会显示不必要的滚动条。只需对更好的用户界面进行调整，如果没有，您也可以使用overflow-x: scroll; ..

<div style="width:300px; overflow-x: auto; white-space: nowrap;">

Demo

另外，请勿使用内联样式，请考虑使用class和id。

防止图像包装但使用滚动

1 个答案: