网格横幅上的娱乐不对齐

Question

我试图在这个topbanner中实现类似的效果：http://motive.theme-sphere.com/news-demo

然而，当我创建它时，图像似乎不能正确对齐。如何确保它们始终像上面的链接一样正确对齐？

您需要调整浏览器，因为767以下它会因响应式设计而重新调整。

＆＃13;

＆＃13;

@import url('http://thisisdallas.github.io/Simple-Grid/simpleGrid.css');

.column-big {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position:absolute;
  bottom:0;
}
 .column-small-1 {

  width: 100%;
 
  padding-bottom: 10px;

}
.column-small-2 {
    padding-top: 10px;
  width: 100%;
  

}

			.column-content {
  position: relative;
  overflow: hidden;
  height: 100%;
}
.column-content .meta-info-doub {
  box-sizing: border-box;
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 40px;
}
.column-content .meta-info-norm {
  box-sizing: border-box;
  position: absolute;
  height: auto;
  width: 100%;
  bottom: 0;
  right: 0;
  padding: 20px;
}
.title-double {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  line-height: 1.65;
  background: #161616;
  background: rgba(22, 22, 22, 0.5);
  color: #fff;
  display: inline;
  padding: 4px 0;
  margin: 0;
  -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  text-transform: uppercase;
}
.title-normal {
  font-family: 'Open Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  background: #161616;
  background: rgba(22, 22, 22, 0.5);
  color: #fff;
  display: inline;
  padding: 4px 0;
  margin: 0;
  -webkit-box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  box-shadow: 7px 0 0 rgba(22, 22, 22, 0.5), -7px 0 0 rgba(22, 22, 22, 0.5);
  text-transform: uppercase;
}
.date-double {
  font-family: 'Open Sans', sans-serif;
  display: inline;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 0 #222;
  text-transform: uppercase;
  margin-bottom: 11px;
  display: block;
}
.date-normal {
  font-family: 'Open Sans', sans-serif;
  display: inline;
  color: #fff;
  font-size: 11px;
  text-shadow: 0 1px 0 #222;
  text-transform: uppercase;
  margin-bottom: 11px;
  display: block;
}
.column-content .content-image {
  height: 100%;
  width: 100%;
  background-size: 100%;
  display: block;
  object-fit: cover;
  -moz-transition: all .5s;
  -webkit-transition: all .5s;
  transition: all .5s;
}
.column-content .content-image:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

＆＃13;

<div class="grid grid-pad">
			<div class="col-8-12">
				<div class="content">
						<div class="column-content">
				        <img src="http://motive.theme-sphere.com/news-demo/wp-content/uploads/2014/09/basketball_2-740x357.jpg" href="#" id="img-zoom" class="content-image">
				        <div class="meta-info-doub">
				          <h3 class="date-double">23. Oktober 2015</h3>
				          <h3 class="title-double">Post2</h3>
				        </div>
				      </div>
				</div>
			</div>
			<div class="col-4-12">
				<div class="content">
					
    <div class="column-small-1">
      <div class="column-content">
        <img src="http://motive.theme-sphere.com/news-demo/wp-content/uploads/2014/09/basketball_2-740x357.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-norm">
          <h3 class="date-double">23. Oktober 2015</h3>
          <div class="info-title">
            <h3 class="title-normal">Post 3</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="column-small-2">
      <div class="column-content">
        <img src="http://motive.theme-sphere.com/news-demo/wp-content/uploads/2014/09/basketball_2-740x357.jpg" href="#" id="img-zoom" class="content-image">
        <div class="meta-info-norm">
          <h3 class="date-double">23. Oktober 2015</h3>
          <div class="info-title">
            <h3 class="title-normal">Post1</h3>
          </div>
        </div>
     
				</div>
			</div>

		</div>

＆＃13;

＆＃13;

＆＃13;