如何让内容浮动到其容器的底部？

Question

图片展示了我需要用css实现的目标。我必须在css中做出哪些改变才能获得理想的结果？有没有办法将它移到底部而不使用margin-top？ 还应该有图像中间的下一个和前一个箭头。

请参阅下面的代码。

谢谢。

.gallery {

	width: 940px;
	margin: 70px auto 0 auto;
}

.img-1 {
	float: left;
	width: 300px;
	height: 400px;
	background: #a7a7a7;
}
.img-2 {
	float: left;
	width:300px;
	height: 400px;
	background: #a7a7a7;
	margin-left: 20px;
}
.img-3{
	float: right;
	width:300px;
	height: 400px;
	background: #a7a7a7;
}

.h2_img {
	color: #fff;
	font-size: 28px;
	padding: 20px;
	margin: 0;
}

.p_img {
	color: #ccc;
	margin: 0;
	padding: 0px 20px 0px 20px;
	font-size: 16px;
}

.span_img {
	color: #fff;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 3px 10px 3px 10px;
	font-size: 11px;
	-webkit-border-radius: 28px;
	-moz-border-radius: 28px;
	border-radius: 28px;
	background-color: blue;
	margin: 20px;
	position: absolute;
}

<div class="gallery">
		<div class="img-1">
			<span class="span_img">IMG 1</span>
			<h2 class="h2_img">Some text, some great text</h2>
			<p class="p_img">Text text text text text text text text text text text text text text</p>
		</div>
		<div class="img-2">
			<span class="span_img">IMG 2</span>
			<h2 class="h2_img">Some text, some great text</h2>
			<p class="p_img">Text text text text text text text text text text text text text text</p>
		</div>
		<div class="img-3">
			<span class="span_img">IMG 3</span>
			<h2 class="h2_img">Some text, some great text</h2>
			<p class="p_img">Text text text text text text text text text text text text text text</p>
		</div>
	</div>

Answer 1

您需要将内容包装在单独的元素中并定位它。

*log << "Error" << endl;

.img-1 {
  float: left;
  width: 300px;
  height: 400px;
  background: #a7a7a7;
  position: relative;
}
.img-1 div {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: lightblue;
}