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

Question

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

我曾尝试寻找这个问题的答案，并认为使用适合对齐常规“img src”元素的 CSS 属性会奏效，但事实并非如此。

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

我哪里错了？

#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;
}