在带有水平溢出的固定框中水平显示图像答案

【问题标题】：Displaying images horizontally in a fixed with box w/ horizontal overflow在带有水平溢出的固定框中水平显示图像
【发布时间】：2010-06-28 20:30:52
【问题描述】：

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

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

如何强制图像彼此相邻显示？如何实现水平滚动，需要css3支持吗？

【问题讨论】：

标签： css

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

overflow-x 需要 CSS3 支持 AFAIK？
那为什么不使用overflow，并且确保div的高度不小于里面的内容呢？