html divs不会正确对齐

我编写的这个网站包含很多图片，所以我使用angularjs来帮助我分类和放置东西。html divs不会正确对齐

一切都进行得很好，直到这个：

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

（我包括此信息，因为我不能包括图片足以显示整个视图）

事情是我只用一个div和ng-repeat来放置这些divs

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

请让我知道如果有什么我只是没有看到

来源

2017-08-01 Cameron

您可以创建一个小提琴再现？ – Icycool

[CSS Div对齐问题]的可能重复（https://stackoverflow.com/questions/5149087/css-div-alignment-problem） –

嗯，有很多方法可以解决您的问题。然而，保持你的大部分代码我只会改变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>

来源

2017-08-01 05:06:25 Aslam

工作就像一个魅力！谢谢@hunzaboy – Cameron

我做了一个.container-body .container-cityDisplay Flexbox的。

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

 
.container-body .container-cityDisplay .cityDisplay { 
 
    display: inline; 
 
    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-body"> 
 
    <div class="container-cityDisplay" ng-hide="hideCard2"> 
 
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
 
     | orderBy: 'city'"> 
 
     <img src="http://placehold.it/200"> 
 
     <h2>City<span>Country</span></h2> 
 
    </div> 
 
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
 
     | orderBy: 'city'"> 
 
     <img src="http://placehold.it/200"> 
 
     <h2>City<span>Country</span></h2> 
 
    </div> 
 
    <div class="cityDisplay" ng-repeat="city in cities | unique: 'city' 
 
     | orderBy: 'city'"> 
 
     <img src="http://placehold.it/200"> 
 
     <h2>City<span>Country</span></h2> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-08-01 05:11:06 Gerard

html divs不会正确对齐

回答

相关问题