Question

我正在尝试将三个背景图像并排对齐，理想情况下是流动性，以便在我的浏览器窗口调整大小时重新定位。

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

基本上，我有一个带图库的页面。每张图片都有一个城市名称。通过研究，我决定将背景图像属性分配给三个单独的div，并使用与每个图像的高度匹配的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的百分比宽度，则必须将它们浮动。我建议用这个：

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

看看这个小提琴： jsfiddle example

如何并排排列三个背景图像

2 个答案: