糾正圖像並使它們尺寸相同HTML和CSS

我剛開始學習HTML和CSS，並且遇到圖像未對齊並試圖使它們尺寸相同。我怎樣才能解決這個問題？糾正圖像並使它們尺寸相同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; 
}

來源

2016-04-17 xtjnrchris

你需要使用其他行，每次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>

來源

2016-04-17 16:09:36 Fala

在每一行上，您可以添加等於12的分割，因此col-sm-4可以在一行中使用3次，您添加的行數越多，添加的行越多。 – Fala

謝謝，但圖像仍然沒有正確對齊。我的CSS是否正確？ #cities .col-md-3 { height：570px; 溢出：隱藏; } – xtjnrchris

@xtjnrchris實際上沒有什麼錯，你需要做的就是像我提到的那樣使用多行，下面是它的外觀：http://codepen.io/mohamadfala/pen/MyGxGE 如果你需要圖像相同身高，請嘗試他們:) – Fala

我不'不要以爲你需要每個圖像的div。足夠有一個主容器給他們。嘗試設置2個不同的類，其中一個使用float：left和另一個float：right，這樣他們將在同一行中。嘗試查看此頁面http://www.w3schools.com/html/html_images.asp「圖像浮動」並測試以瞭解其工作原理。

來源

2016-04-18 06:04:50 Frutis

糾正圖像並使它們尺寸相同HTML和CSS

回答

相關問題