html - 如何将三个 div 图片保持在同一行？

Question

我正在尝试在同一行上创建三个独立的圆形图像。我设法让两个位置正确，但我无法让最后一个移动到正确的位置。

.wrap {
  width: 100%;
}

.image-left {
  content: url(https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png);
  height: 250px;
  float: left;
  padding-left: 10%;
}

.image-centre {
  content: url(https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png);
  height: 250px;
  margin-left: auto;
  margin-right: auto;
}

.image-right {
  content: url(https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png);
  height: 250px;
  float: right;
  padding-right: 10%;
}

<div class="wrap">
  <div class="image-left"></div>
  <div class="image-centre"></div>
  <div class="image-right"></div>
</div>

Answer 1

可能有更好的方法来做到这一点，但这里有一个有效的方法:https://jsfiddle.net/5ybLh6vy/

<div class="wrap">
    <div class="image-left">
        <img src="https://s16.postimg.org/qm1wc2syd/alexandru_stavrica_166342.png">
    </div>
    <div class="image-centre">
        <img src="https://s23.postimg.org/57nxodezv/jorg_angeli_128760.png">
    </div>
    <div class="image-right">
        <img src="https://s3.postimg.org/ejuuxd6n7/jay_wennington_2250_min.png">
    </div>
</div>

.wrap {
  width: 100%;
  display: table;
}

.wrap img {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
}

.image-left, .image-centre, .image-right {
  display: table-cell;
  width: 33%;
}