Question

我有一个高度为500像素，宽度为200像素的div。里面是一堆左侧浮动的图像，全部180px宽，500px高。左右10px填充意味着div将在页面加载时只显示一个图像。

我希望这个div水平滚动，垂直滚动应该隐藏。因为我在div上设置了一个固定的宽度，浮动似乎不会将图像彼此相邻但仍然在彼此之下。

如何强制图像显示在彼此旁边？如何实现水平滚动，是否需要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

您需要在包含div上使用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>

水平显示图像，带有水平溢出的固定框

2 个答案: