html - 使用滚动条确定水平画廊中的 div 宽度

Question

我需要帮助。在我的网站上 vladimirvojtela.com ，我有带水平滚动条的图库，最后有空格，因为代码中的宽度参数。

我可以用一些脚本删除这个空白，这些脚本在渲染所有图像后确定自动 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;     
}