html - 如何并排对齐三张背景图像

Question

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

我尝试寻找此问题的答案，并认为使用适合对齐常规“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 的百分比宽度，你也必须 float 它们。 我建议使用这个:

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