如何并排对齐三个背景图像

Question

我正在尝试并排对齐三个背景图像，最好是具有流动性，以便它们在我的浏览器 window 调整大小时重新定位。

我尝试寻找这个问题的答案，并认为使用适合对齐常规 'img src' 元素的 CSS 属性会起作用，但它们没有。

基本上，我有一个带有图库的页面。每张图片的中心都有一个城市名称。通过研究，我决定将背景图像属性分配给三个单独的 div，并使用与每个图像的高度相匹配的行高属性，以便城市名称在中心对齐。背景图像技术有助于城市名称的对齐。

我哪里错了？

#jumbotron2 {
  height: 500px;
  width: 100%;
}
#city-container {
  width: 100%;
  height: 100%;
}
.london-square {
  height: 400px;
  width: 400px;
  background-image: url("tombnb-images/london-400px.jpg")
}
.newyork-square {
  height: 400px;
  width: 400px;
  background-image: url("tombnb-images/newyork-400px.jpg")
}
.sydney-square {
  height: 400px;
  width: 400px;
  background-image: url("tombnb-images/sydney-400px.jpg")
}
.square p {
  font-family: 'Slabo 27px', serif;
  font-size: 32px;
  color: #FFFFFF;
  line-height: 400px;
  text-align: center;
  text-shadow: 0px 0px 10px black;
}

<div id="jumbotron2">

  <div id="city-container">

    <div class="london-square square">
      <p id="text">London</p>
    </div>

    <div class="newyork-square square">
      <p id="text">New York</p>
    </div>

    <div class="sydney-square square">
      <p id="text">Sydney</p>
    </div>

  </div>

</div>

Answer 1

如果您使用 div 的百分比宽度，您也必须浮动它们。我推荐使用这个：

#city-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-warp: wrap;
}

Answer 2

您可以使用 bootstrap。你把你的图片放在 div 里。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-4">
    <img class="img-thumbnail" src="http://www.nature.org/cs/groups/webcontent/@web/@giftplanning/documents/media/sample-cga-rates-splash-1.jpg">
  </div>
  <div class="col-sm-4">
    <img class="img-thumbnail" src="http://sharedforfree.com/wp-content/uploads/2013/07/cropped-harrimanToday.jpg">
  </div>
  <div class="col-sm-4">
    <img class="img-thumbnail" src="http://pre02.deviantart.net/f34e/th/pre/f/2015/182/4/f/croatia_nature_pack___sample__2___proref_org_by_proref-d8zgrc2.jpg">
  </div>
</div>

看看这个 fiddle： jsfiddle example

如何并排对齐三个背景图像

How to align three background images side by side

html

css

background-image