Style for image block

Below is the code for displaying image previews, images are displayed horizontally in one line, I can’t get a horizontal scroll bar to appear when the number of previews exceeds the block width.

<style type="text/css"> 
 .images{position:relative; float:left}
 </style>

and

<?php if (isset($filenames)) : ?>
 <?php foreach ($filenames as $k => $filename) : ?>
   <div id="images">
     <img src="<?php echo HOST . 'imagesCatalog/' . $filename ?>" 
      alt="" id="photo_mini_<?php echo $k ?>"class="photo_mini" />
   </div>
 <?php endforeach ?>
 <?php endif ?>

Added.

I tried this, but the images wrap to another line and vertical scrolling appears:

<div style="width:1024px;height:130px;overflow-x:scroll ">
<?php if (isset($filenames)) : ?>
<?php foreach ($filenames as $k => $filename) : ?>
    <div style="position:relative;float:left; height:130px;white-space: no-wrap "> 
      <img src="<?php echo HOST . 'imagesCatalog/' . $filename ?>" 
          alt="" id="photo_mini_<?php echo $k ?>" class="photo_mini" />
    </div>
<?php endforeach ?>
<?php endif ?>
</div>

Answer 1, authority 100%

<div id="imagesStripe" style="overflow-x: scroll; white-space: no-wrap;"></div>

Of course, they will kill me for overflow-x, but without it, it is unlikely that anything will be done


Answer 2

Try specifying widthand display:block;for pictures


Answer 3

specify width:auto;did you try the container?