5 bilder nebeneinander für jede Bildschirmbreite

[Experiance]

Hallo!

Ich möchte gerne 5 Bilder nebeneinander anordnen. Direkt unter den Bildern soll je ein Text (eingerahmt) mit einem Link stehen.

Auf dem Smartphone werden diese Bilder aufgrund der Größe dann untereinander angezeigt. Auf kleineren Bildschirmen kann es auch vorkommen, dass ein oder zwei Bilder in die nächste Zeile hüpfen.

Wie kann ich diesen Fehler beheben ohne ein Handheld zu gestalten???

hier der Link zur Homepage: http://experiance.heimat.eu/

hier der HTML-Code:

  
<div id="bilderserie">  
<div class="img150">  
<a href="about_us.html"><img src="./images/001.jpg" style="border: thin dotted white"></a><p>  
<div class="dt1"><center><a href="about_us.html" class="popup"><img src="./images/ja.png">&Uuml;BER UNS<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="gallery.html"><img src="./images/002.jpg" style="border: thin dotted white"></a><p>  
<div class="dt2"><center><a href="gallery.html" class="popup"><img src="./images/ja.png">GALLERY<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="kontakt.html"><img src="./images/003.jpg" style="border: thin dotted white"></a><p>  
<div class="dt2"><center><a href="kontakt.html" class="popup"><img src="./images/ja.png">KONTAKT<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="agb.html"><img src="./images/004.jpg" style="border: thin dotted white"></a><p>  
<div class="dt2"><center><a href="agb.html" class="popup"><img src="./images/ja.png">AGB<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="impressum.html"><img src="./images/005.jpg" style="border: thin dotted white"></a><p>  
<div class="dt5"><center><a href="impressum.html" class="popup"><img src="./images/ja.png">IMPRESSUM<img src="./images/ja2.png"></a></center></div>  
</div>  
<br style="clear: both;">  
</div>  

hier der CSS-Code:

  
.img150{  
float: left;  
padding: 0px;  
font-size: 1em;  
display: inline-block;  
}  
  
#bilderserie{  
float: none;  
margin-top: 0px;  
margin-left: 4%;  
margin-right: auto;  
z-index:2;  
max-width: 100%;  
}  
  
  
.dt1{  
height:2.5em;  
  
border-left: 2px solid #ffffff;  
border-bottom: 2px solid #ffffff;  
border-top: 2px solid #ffffff;  
border-radius: 10px;  
padding-bottom: 25px;  
background-image: url(./images/shine.png);  
}  
.dt2{  
height:2.5em;  
  
border-bottom: 2px solid #ffffff;  
border-top: 2px solid #ffffff;  
border-radius: 10px;  
padding-bottom: 25px;  
background-image: url(./images/shine.png);  
}  
  
.dt5{  
height:2.5em;  
  
border-right: 2px solid #ffffff;  
border-bottom: 2px solid #ffffff;  
border-top: 2px solid #ffffff;  
border-radius: 10px;  
padding-bottom: 25px;  
background-image: url(./images/shine.png);  
}  

Ich danke euch herzlich für eure antworten!!!