对齐底部不同大小的图像

Question

我有每个滑块5个图像和所有不同的大小，我需要一种方法将所有图像对齐到底部，以便它们都对齐良好，并且能够在图像之间添加相同的填充。

我遇到的问题是所有图像聚集在一起，并且图像之间的填充不一致。

ul.building_images { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t } 
 

 
\t .building_images li { 
 
\t width: 270px; 
 
\t height: 270px; 
 
\t list-style-type: none; 
 
\t float: left; 
 
\t margin: 2px; 
 
\t margin-right: -62px; 
 
\t /*border: 1px solid #000;*/ 
 
\t position: relative; 
 
\t } 
 

 
\t .building_images li img { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t } 
 
\t img { 
 
\t } 
 

 
\t .building_images li:hover img { 
 
\t /*width: 273px;*/ 
 
\t height: 273px; 
 
\t /*background-color: blue;*/ 
 
\t z-index: 1; 
 
\t }

<div id="randomContainer"> 
 
\t <div class="container">  
 
\t  <div class="row">    
 
\t \t <ul class="building_images"> 
 
\t \t <li><img class="img1" src="<?php echourl(); ?>/images/slider/1.png" /> 
 
\t \t \t <div class="content_hidden1"><h3>Schools</h3> 
 
\t \t  <p>Learning environments are about more than books, papers and grades. It is about keeping the students and teachers comfortable in the classroom while saving the school as much money as possible. 
 
\t \t \t </p></div> 
 
\t \t </li> 
 
\t \t <li><img class="img2" src="<?php echourl(); ?>/images/slider/2.png" /> 
 
\t \t \t <div class="content_hidden2"><h3>Commmercial</h3><p>Commercial buildings use over 60% of the electricity in the US, making energy efficiency more important than ever. Perfection has been an industry leader in providing energy efficient solutions while keeping comfort and serviceability in mind.</p> 
 
\t \t  </div> 
 
\t \t </li> 
 
\t \t <li><img class="img3" src="<?php echourl(); ?>/images/slider/3.png" /> 
 
\t \t \t <div class="content_hidden3"><h3>Civic</h3> 
 
\t  <p>Whether a project for a courthouse, jail, police department or small office in City Hall, we know that we have to design the most functional, energy efficient solution for a tight budget.</p> 
 
\t  </div> 
 
\t \t </li> 
 
\t \t <li><img class="img4" src="<?php echourl(); ?>/images/slider/4.png" /> 
 
\t \t \t <div class="content_hidden4"><h3>WAREHOUSE/LOGISTICS</h3> 
 
\t \t  <p>Perfection designs and installs mechanical systems for warehouse and distribution facilities. 
 
\t \t  <a href="/"><img src="">test</a> 
 
\t \t  </p> 
 
\t \t  </div> 
 
\t \t </li> 
 
\t \t <li><img class="img5" src="<?php echourl(); ?>/images/slider/5.png" /> 
 
\t \t \t <div class="content_hidden5"><h3>Health Care</h3> 
 
\t  <p>Perfection understands the complexity of doing construction and maintenance services in an active health care facility. Communication, safety and proper project management are the keys to a successful outcome in this industry. 
 
\t \t </p></div> 
 
\t \t </li> 
 
\t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

DEMO OF ANSWER

这些图像一堆因为这个CSS属性一起：

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

通过编辑该值可以改变每个li元件之间的距离。尝试例如30px您li的之间的恒定margin：

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

---

接下来，您可以使用的CSS标签position: absolute，你已经使用设置top: 0定位您li内部图像。您可以将其更改为bottom: 0。

虽然你应该防止图像拉伸比你的幻灯片更大。我已经完成了这项工作，将max-width: 100%添加到您的图片中。

这是你的.building_images li可能是什么样子：

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

我创建最小JSFIDDLE DEMO向您展示上面提到的两个定位的结果。