對齊底部不同大小的圖像

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向您展示上面提到的兩個定位的結果。