html - 连续放置并对齐图片

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>

the spaces among pictures are not equal PLS see image

Answer 1

我建议为此使用 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