水平显示图像与固定框与水平溢出

Question

我有一个高度为500px，宽度为200px的div。里面是一堆左侧浮动的图像，宽度为180px，高度为500px。左右两边填充10px，这意味着div会在页面加载中显示一个图像。

我想这个水平滚动，垂直滚动应该隐藏。因为我在div上设置了一个固定宽度，所以float看起来并没有将图像放在彼此的旁边，而是仍然在彼此之下。

如何强制图像显示在彼此旁边？ 如何实现水平滚动，是否需要css3支持？

Answer 1

尝试这样的事情

#outer { 
    width:500px; 
    height:200px; 
    position:relative; 
    overflow:scroll; 
    } 

    #outer ul { 
    display:block; 
    width:1000px; 
    } 
    #outer ul li { 
    display:block; 
    float:left; 
    } 
    img{ 
    height:180px; 
    width:480px; 
    padding:10px; 

    } 

    <div id="outer"> 

     <ul> 
     <li><img href="http://lechart.dk/wp-content/uploads/2009/05/nerd.jpg" /></li> 
     <li><img href="http://mynotetakingnerd.files.wordpress.com/2009/07/note-taking-nerd.jpg" /></li> 
     </ul> 

    </div> 

工作实例http://jsbin.com/ineya4/2/edit

Answer 2

您需要在您的包含分区使用overflow-x: scroll;。

div.container {overflow-x: scroll; overflow-y:hidden; width: 100px; height:500px;} 
div.image {width:100px; height:500px; float:left;background:#890;} 

<div class="container"> 
    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 

    <img class='image' /> 
</div>