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不會正確對齊

回答

相關問題