html - 网格横幅上的娱乐未对齐

Question

我正在尝试实现与此顶级横幅类似的效果:http://motive.theme-sphere.com/news-demo

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

您需要适本地调整您的浏览器，因为低于 767 它将由于响应式设计而重新调整。

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

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

Answer 1

我的第一印象是，您可以通过将 .column-small-1 中的底部填充更改为 0 而不是 10px 来调整布局。

可能可以使用边距而不是填充来调整右边的两个图像，这也可以解决问题。

注意: 底部边缘略微偏离 1px(至少在 Firefox 中)并且这个工件也存在于您作为示例发布的原始站点中(原始站点使用 WordPress 主题).这个工件也出现在我提出的解决方案中。

@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: 0px;
}
.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: auto;
  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);
}

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