将图片放在一行并对齐

Question

使用以下结构，图片在行中无法均匀间隔。

在图片上，您可以看到第二张和第三张之间有更多的空白。

我使用了以下代码。

css:

img {
    max-width: 100%;
    margin: auto;
}

.grid {
    margin: 0 auto;
    max-width: 712px;
    width: 100%;
}

.row {
    width: 100%;
    display: flex;
}
.col-4 {
    width: 33.33%;
}

<div class="row" >
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="left"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder" align="center"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"  align="right"></div>
    </div>

图片之间的空格不相等，请参考图片

- L. Akos

---

由于您正在使用Bootstrap，请将“class ='img-responsive'”添加到您的图像。 - Callat

在这种情况下，只需删除内联样式（align="..."）即可。 - VXp

Answer 1

您可以使用justify-content: space-between^[参考]来平均间隔选项。您代码的主要问题是div元素上的align属性。对齐正在与其他布局代码产生冲突，从而导致奇怪的间距。

img {
    max-width: 100%;
    margin: auto;
}

.grid {
    margin: 0 auto;
    max-width: 712px;
    width: 100%;
}

.row {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.col-4 {
    flex: 1;
}

<div class="row" >
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div>
      <div class="col-4"><img src="http://via.placeholder.com/200.jpg?text=Placeholder"></div>
    </div>

- Alex W

Answer 2

我建议使用flexbox来实现这个功能：

<div class="row pics-container" >
  <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div>
  <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div>
  <div class="col-4 pic-wrapper"><img src="images/thmb1.jpg"></div>
</div>


.pics-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.pic-wrapper {
  align-self: center;
}

这个CSS技巧的简明详细示例页面在这里: Flexbox Playground

- McHat

---

嗨，谢谢，现在图片之间的空隙已经修正了，但是图片没有填满整行。https://imgur.com/a/vJLJr - L. Akos