html divsが正しく整列しない

Question

私はこのウェブサイトをコーディングしていますので、私はangularjsを使用して分類してレイアウトしています。

すべてがこのまでは良いつもりだった：

私は3列幅である。このグリッド構造を有し、約6列の高

を私は含まれませんでしたので、（私はこの情報が含まれて

これらのdivをレイアウトするには、1つのdivとng-repeatのみを使用しています。

.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テキストの位置を変更します。あなたは行き​​たいです。

このようなレイアウトにはフレックスボックスの使用を強くお勧めします。

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

Answer 2

私は.container-body .container-cityDisplayフレキシボックスを作りました。

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