Question

我每个滑块有5个图像，并且所有不同的尺寸，我需要一种方法将所有图像对齐到底部，这样它们都能很好地对齐，并且能够在图像之间添加相同的填充。

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

＆＃13;

    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;
	}

＆＃13;

<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 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.
			</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 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>
		    </div>
		</li>
		<li><img class="img3" src="<?php echourl(); ?>/images/slider/3.png" />
			<div class="content_hidden3"><h3>Civic</h3>
	    <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>
	    </div>
		</li>
		<li><img class="img4" src="<?php echourl(); ?>/images/slider/4.png" />
			<div class="content_hidden4"><h3>WAREHOUSE/LOGISTICS</h3>
		    <p>Perfection designs and installs mechanical systems for warehouse and 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 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. 
		</p></div>
		</li>
		</ul>
		</div>
	</div>
</div>

＆＃13;

Answer 1

<强> DEMO OF ANSWER

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

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

通过编辑此值，您可以更改每个li元素之间的距离。试着30px代表margin之间的常量li：

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

接下来，您可以使用已用于设置li的css标记position: absolute将图像放在top: 0内。您可以将其更改为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 ，以显示上述两个修补程序的结果。

对齐底部不同尺寸的图像

1 个答案: