HTML/CSS Как автоматически настроить ширину моего контейнера, чтобы показывать несколько изображений по горизонтали?

Question

Я хочу, чтобы переменное количество изображений отображалось в сети горизонтально (по ним можно перемещаться с помощью горизонтальной полосы прокрутки), но я не могу отобразить изображения за пределами 100% ширины браузера.

Так как количество изображений будет варьироваться, мне нужно избегать установки постоянной ширины контейнера.

Вот код, который я пытаюсь прямо сейчас.

HTML:

    <div id="container-galeria">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
        <img src="galeria1/1.jpg">
    </div>

CSS:

#container-galeria{width:auto;min-width:100%;height:auto;min-height:100%;}
#container-galeria img{float:left}

Надеюсь, я был ясен, и кто-то может помочь мне с этим. Заранее спасибо!

Answer 1

Попробуй это:

<div id="container-galeria">
       <ul><li> <img src="galeria1/1.jpg"></li>
       <li> <img src="galeria1/1.jpg"></li>
        <li><img src="galeria1/1.jpg"></li>
        <li><img src="galeria1/1.jpg"></li>
        <li><img src="galeria1/1.jpg"></li>
    </div>

 ul {

  list-style:none; 
  white-space: nowrap;
}
li {
  float: left:
/*overflow-x:scroll; /*optional*/ */
width:120px;
  display: inline;
}

http://pastebin.com/8x6P8nA1