Отображение изображений по горизонтали в фиксированном окне с горизонтальным переполнением

Question

У меня есть div с высотой 500px и шириной 200px.Внутри куча изображений, которые плавают влево и имеют ширину 180 пикселей и высоту 500 пикселей.С отступом 10px влево и вправо это означает, что div покажет только одно изображение при загрузке страницы.

Я бы хотел, чтобы этот 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.

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>