イメージを整列させて同じサイズにする問題

Question

私はちょうどHTMLとCSSの学習を始めました。画像のずれと同じサイズにしようとしています。これをどうすれば解決できますか？

これは、現在のHTMLです：

<div class="container text-center">  
    <h3>Find Your University</h3><br> 
    <div class="row"> 
     <div id="cities"> 
    <div class="col-sm-4"> 
     <img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    </div> 
    </div> 

とCSS：

#cities .col-md-3 { 
height:570px; 
    overflow:hidden; 
} 

Answer 1

あなたが各3つのイメージのために別の行を使用する必要があります。

<div class="container text-center">  
    <h3>Find Your University</h3><br> 

     <div id="cities"> 
     <div class="row"> 
    <div class="col-sm-4"> 
     <img src="https://media.timeout.com/images/100644443/image.jpg" class="img-responsive" style="width:100%" alt="London"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://www.gaiasg.com/img/si1.jpg" class="img-responsive" style="width:100%" alt="Singapore"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://images.trvl-media.com/media/content/shared/images/travelguides/Argentina-8-smalltabletRetina.jpg" class="img-responsive" style="width:100%" alt="Image"> 
    </div> </div> 

<div class="row"> 
    <div class="col-sm-4"> 
     <img src="http://www.travelstart.com.ng/blog/wp-content/uploads/2014/02/Lagos.jpg" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="https://www.sohohousechicago.com/system/files/082014/53e8a9c2f9426120f600002e/xlarge/063696_002.jpg?1424778295" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 
    <div class="col-sm-4"> 
     <img src="http://www.tnetnoc.com/dealsImages/landingPages/destinationLandingPages/other/Sydney-345x225.1.jpg" class="img-responsive" style="width:100%" alt="Image"> 
    </div> 

    </div> 
</div> 

Answer 2

私は、すべての画像にdivが必要だと思ってはいけません。それらのために1つの主要な容器を持っている。 2つの異なるクラスを設定しようとすると、そのうちの1つに浮動小数点数を使用します。左と他の浮動小数点に：右のように、それらは同じ行になります。 このページを参照してくださいhttp://www.w3schools.com/html/html_images.asp "image floating"とそれが動作する方法を理解するためにそれをテストします。