Определите ширину div в горизонтальной галерее с помощью прокрутки

Question

Мне нужна помощь. На моем сайте vladimirvojtela.com, у меня есть галерея с горизонтальной полосой прокрутки, и у меня есть пробелы на конце, beacause из параметра width в коде.

Могу ли я удалить это пробелы с помощью какого-либо скрипта, который определяет автоматическую ширину DIV после визуализации всех изображений? Спасибо за помощь!

HTML

<div class='photo_wrap' style='width:30685px'> 


<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5627_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5635_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5644_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5654_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5674_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5680_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5684_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5693_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5731_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5737_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5738_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5751_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5774_ret_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5821_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5853_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5894_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5897_small.jpg" height="700px" style="width:auto; margin: 5px" > 
<img src="admin/uploads/galleries/09fa472aaefe3ab2563b97b0d5c4a325/DSC_5914_small.jpg" height="700px" style="width:auto; margin: 5px" > 
</div> 

CSS

.photo_wrap { 
    z-index: 1; 
    position: absolute; 
    top: 4em; 
} 


.photo_wrap img { 
    display: inline; 
    width: 500px; 
    margin-right: 0; 
} 

Answer 1

Вот решение для Вас:

.photo_wrap { 
    z-index: 1; 
    display: inline; 
    width: auto; 
    white-space:nowrap; 
    top: 4em;  
}