html - Align bottom different size images -

i have 5 images per slider, , different sizes, need way align images bottom aligned well, , being able add same padding between images.

the issue having images bunch together, , padding isn't consistent between images.

    ul.building_images {  	margin: 0;  	padding: 0;  	}    	.building_images li {  	width: 270px;  	height: 270px;  	list-style-type: none;  	float: left;  	margin: 2px;  	margin-right: -62px;  	/*border: 1px solid #000;*/  	position: relative;  	}    	.building_images li img {  	position: absolute;  	top: 0;  	left: 0;  	}  	img {  	}    	.building_images li:hover img {  	/*width: 273px;*/  	height: 273px;  	/*background-color: blue;*/  	z-index: 1;  	}

<div id="randomcontainer">  	<div class="container">      	    <div class="row">               		<ul class="building_images">  		<li><img class="img1" src="<?php echourl(); ?>/images/slider/1.png" />  			<div class="content_hidden1"><h3>schools</h3>  		    <p>learning environments more books, papers , grades. keeping students , teachers comfortable in classroom while saving school money possible.  			</p></div>  		</li>  		<li><img class="img2" src="<?php echourl(); ?>/images/slider/2.png" />  			 <div class="content_hidden2"><h3>commmercial</h3><p>commercial buildings use on 60% of electricity in us, making energy efficiency more important ever. perfection has been industry leader in providing energy efficient solutions while keeping comfort , serviceability in mind.</p>  		    </div>  		</li>  		<li><img class="img3" src="<?php echourl(); ?>/images/slider/3.png" />  			<div class="content_hidden3"><h3>civic</h3>  	    <p>whether project courthouse, jail, police department or small office in city hall, know have design functional, energy efficient solution tight budget.</p>  	    </div>  		</li>  		<li><img class="img4" src="<?php echourl(); ?>/images/slider/4.png" />  			<div class="content_hidden4"><h3>warehouse/logistics</h3>  		    <p>perfection designs , installs mechanical systems warehouse , distribution facilities.  		    <a href="/"><img src="">test</a>  		    </p>  		    </div>  		</li>  		<li><img class="img5" src="<?php echourl(); ?>/images/slider/5.png" />  			<div class="content_hidden5"><h3>health care</h3>  	    <p>perfection understands complexity of doing construction , maintenance services in active health care facility. communication, safety , proper project management keys successful outcome in industry.   		</p></div>  		</li>  		</ul>  		</div>  	</div>  </div>

demo of answer

the images bunch because of css attribute:

.building_images li {   margin-right: -62px; } 

by editing value can change distance between each li element. try example 30px constant margin between li's:

.building_images li { margin-right: 30px; } 

---

next can position images inside li using css tag position: absolute, use set top: 0. can change bottom: 0.

although should prevent images stretching bigger slides are. have done adding max-width: 100% images.

here .building_images li like:

<style type="text/css"> ul {     margin: 0;      padding: 0; } .building_images li {     width: 80px;     /* set width */     height: 150px;   /* set height */     margin: 0 30px 30px 0; /* set margins (top right bottom left) */     list-style: none;      float: left;     position: relative;      background: red; /* demo, see <li> */ } .building_images li img {      max-width: 100% !important; /* auto scale images full width */      position: absolute;       top: auto;      left: 0;      right: 0;      bottom: 0; /* align images @ bottom */ } </style> 

i have created minimized jsfiddle demo show result of 2 fixes named above.