html div 不会正确对齐

Question

我正在为这个包含大量图片的网站编写代码，因此我使用 angularjs 来帮助我对内容进行分类和布局。

在此之前一切都很顺利:

我的网格结构是 3 列宽，大约 6 列高

(我包含此信息是因为我无法包含足够大的图片来显示整个 View )

问题是我只使用一个 div 和 ng-repeat 来布置这些 div

.container-body .container-cityDisplay {
margin: 2% 0 0 2%;
}

.container-body .container-cityDisplay .cityDisplay {
display: inline-block;
width: 28%;
height: 200px;
padding: 1%;
margin: 1%;
background-color: #f4f4f4;
}

.container-body .container-cityDisplay .cityDisplay img {
width: 100%;
height: 100%;
opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
margin: -50% 0 0 0;
text-align: center;
font-size: 1em;
letter-spacing: 6px;
text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
color: transparent;
text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
display: block;
font-size: 1.3em;
letter-spacing: 14px;
margin: 10% 0 0 1%;
}

<div class="container-cityDisplay" ng-hide="hideCard2">
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
        | orderBy: 'city'">
        <img ng-src="{{city.source}}">
        <h2>{{city.city}}<span>{{city.country}}</span></h2>
    </div>
</div>

如果我没有看到什么，请告诉我

Answer 1

好吧，有很多方法可以解决您的问题。但是，保留你们中的大多数代码，我只会更改 h2 文本的位置。你可以开始了。

我强烈建议对这种布局使用 flexbox。

.container-body .container-cityDisplay {
margin: 2% 0 0 2%;
}

.container-body .container-cityDisplay .cityDisplay {
display: inline-block;
width: 28%;
height: 200px;
padding: 1%;
margin: 1%;
background-color: #f4f4f4;
  position: relative; /* Making the cityDisplay Relative */
}

.container-body .container-cityDisplay .cityDisplay img {
width: 100%;
height: 100%;
opacity: .2;
}

.container-body .container-cityDisplay .cityDisplay img:hover {
opacity: 1;
}

.container-body .container-cityDisplay .cityDisplay h2 {
/* margin: -50% 0 0 0; */
 position: absolute; /* Using Position to position the text absolute*/
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
text-align: center;
font-size: 1em;
letter-spacing: 6px;
text-shadow: 2px 2px 4px #bdbdbd;
}

.container-body .container-cityDisplay .cityDisplay:hover h2 {
color: transparent;
text-shadow: none;
}

.container-body .container-cityDisplay .cityDisplay span {
display: block;
font-size: 1.3em;
letter-spacing: 14px;
margin: 10% 0 0 1%;
}

<div class="container-body">
  <div class="container-cityDisplay">
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country name is really long</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name <span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
  <div class="cityDisplay">
    <img src="http://placehold.it/400x400">
    <h2>City Name<span>Country</span></h2>
  </div>
</div>
</div>