Html 对齐底部不同大小的图像

我有5个图像每个滑块，所有不同的大小，我需要一种方法来对齐所有图像的底部，使他们都对齐好，并能够添加相同的填充之间的图像

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

ul.building\u图像{
保证金：0；
填充：0；
}
.李建华{
宽度：270px；
高度：270px；
列表样式类型：无；
浮动：左；
保证金：2倍；
右边距：-62px；
/*边框：1px实心#000*/
位置：相对位置；
}
.建筑图像li img{
位置：绝对位置；
排名：0；
左：0；
}
img{
}
.building_images li:悬停img{
/*宽度：273px*/
身高：273px；
/*背景颜色：蓝色*/
z指数：1；
}

/图像/滑块/1.png“/>
学校
学习环境不仅仅是书本、论文和分数，而是让学生和老师在课堂上感到舒适，同时尽可能节省学校的资金。


/图像/滑块/2.png“/>
商业在美国，商业建筑使用超过60%的电力，这使得能源效率比以往任何时候都更加重要。Perfecture在提供节能解决方案方面一直处于行业领先地位，同时时刻牢记舒适性和可维护性


/图像/滑块/3.png“/>
公民的
无论是法院、监狱、警察局还是市政厅的小型办公室，我们都知道，我们必须在预算紧张的情况下设计最实用、节能的解决方案


/图像/滑块/4.png“/>
仓库/物流
Perfection为仓库和配送设施设计和安装机械系统。


/图像/滑块/5.png“/>
保健
Perfecture了解在活跃的医疗设施中进行施工和维护服务的复杂性。沟通、安全和适当的项目管理是该行业取得成功的关键。

由于此css属性，图像聚集在一起：

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

通过编辑此值，您可以更改每个

li

元素之间的距离。例如，尝试

30px

以获得

li

元素之间的恒定

边距：

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


接下来，您可以使用css标记
position:absolute
将图像定位到
li
中，您已经使用该标记设置
顶部：0
。您可以将其更改为
底部：0

尽管您应该防止图像拉伸到比幻灯片更大的程度。我已经在图像中添加了
max width:100%

以下是您的
.building\u 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>


保险商实验室{
保证金：0；
填充：0；
}
.李建华{
宽度：80px；/*设置宽度*/
高度：150px；/*设置您的高度*/
边距：0 30px 30px 0；/*设置边距（右上-左下）*/
列表样式：无；
浮动：左；
位置：相对位置；
背景：红色；/*仅用于演示，以查看
*/
}
.建筑图像li img{
最大宽度：100%！重要；/*自动将图像缩放到全宽*/
位置：绝对位置；
顶部：自动；
左：0；
右：0；
底部：0；/*在底部对齐图像*/
}

我创建了minimized以向您展示上述两个修复程序的结果。
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现问题所需的最短代码。请参阅是否希望图像对齐在
li
元素的底部（文本上方）或者您希望图像保持在文本上方，但其底线应该在相同的高度上？文本只是单击图像时弹出的，我已经很好地解决了这些问题。我已经编辑了我的答案以适合您的问题，尽管我已经创建了一个JSFIDLE示例供您自己尝试。这非常有效。谢谢您的帮助t、 现在是另一个曲线球。我在图像上有一个悬停选项，这里是CSS，一些图像在悬停时调整大小，一些不调整。
。building_images li img:hover{/*宽度：273px；*/最大宽度：105%！重要；/*背景色：蓝色；*/z-index:1；}
很高兴我帮了你。要解决你的悬停问题，你需要了解
max width
的用法。当
width:100%
说“你必须全宽”时，
max width:100%
说“你可以全宽”。如果你比较小，那没关系。这就是为什么较小的图像无法调整大小。我已经为您创建了一个提琴来显示差异并创建一个修复：如果您想升级您的图像，请替换每个
max width:
width
width
Awesome，完美无瑕，我仍然能够完成它离开max width，我对无法使用hover的图像进行了一些调整大小。非常感谢你所做的一切。