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

Question

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

Я бы хотел, чтобы этот div прокручивался по горизонтали, вертикальный свиток должен быть скрыт. Поскольку я устанавливаю фиксированную ширину в div, поплавок, похоже, не помещает изображения рядом друг с другом, но все еще под ними.

Как заставить изображения отображать рядом друг с другом? Как добиться горизонтальной прокрутки, нужна ли поддержка css3?

Answer 1

Try что-то вроде этого

#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>