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

【问题标题】：How to align three background images side by side如何并排对齐三个背景图像
【发布时间】：2016-09-18 22:06:16
【问题描述】：

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

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

基本上，我有一个带有画廊的页面。每个图像的中心都有一个城市名称。通过研究，我决定将 background-image 属性分配给三个单独的 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>

【问题讨论】：

嗯，它们都有一个固定的宽度：width: 400px;，你有没有试过把它换成一个百分比，例如width: 30%;?
我认为你需要做 float: left 到所有 3 以水平对齐它们。或者 display: inline-block 也可以根据您的布局工作。如果你沿着浮动路线走，你需要在 3 个 div 的容器中添加一个 clearfix。搜索clearfix，相信你会找到很多答案。
@DBS - 每张图片都是原生的 400px 正方形，所以 % 会使它们比我预期的要小。

标签： html css background-image

【解决方案1】：

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

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

【讨论】：

谢谢你，Marouen。将这三行代码添加到我的#city-container div 已经成功！
no pbm :-) 请记住 IE 不支持 flexbox

【解决方案2】：

您可以使用引导程序。你把你的图片放在 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

【讨论】：