Расширьте родительскую ширину div, чтобы он соответствовал дочерним div, горизонтальная прокрутка

Question

Я делаю сайт в стиле галереи горизонтальной прокрутки, похожий на этот: http://ericryananderson.com/book_2

У меня есть родительский div, и внутри него есть дочерние div для каждого отдельного элемента галереи.

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

В настоящее время он ведет себя так, как я хочу, только если я вручную установил ширину.

HTML:

<div class="parent-gallery-div">
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    ...
</div>

CSS:

.parent-gallery-div {
   height: 500px;
   float: left;
   margin-top: 40px;
}

.gallery-item {
   height: 420px;
   float: left;
   margin-right: 20px
}

Answer 1

Если вы хотите увеличить высоту как авто.

попробуйте этот код

<div class="parent-gallery-div">
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    <div class="gallery-item"></div>
    ...
    <div style="clear:both;"></div>
</div>

и удалите свойство высоты для "parent-gallery-div"

Answer 2

Попробуйте добиться этого с помощью плагина jScrollPane http://jscrollpane.kelvinluck.com/ Вот пример: http://longinstudio.pl/realizacje/reklama%20zewnetrzna

Использование относительно простое и выглядит лучше, чем http://ericryananderson.com решение. (например, можно управлять внешним видом прокрутки и анимационными эффектами)