无法对齐图像并使其大小相同HTML＆amp; CSS

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。足够有一个主容器。尝试设置2个不同的类，其中一个使用float：left而另一个使用float：right，这样它们将在同一行中。 尝试查看此页http://www.w3schools.com/html/html_images.asp“图像浮动”并进行测试以了解其工作原理。