Question

使用下面的结构，图片在行中的间隔不均匀。

在图像上，您会看到第2张和第3张图像之间有更多空间

我使用了以下代码。

的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

Answer 2

您可以使用.hide() ^[reference]均匀分隔项目。您的代码的主要问题是justify-content: space-between元素上的align属性。 Align正在对抗其他布局代码并导致奇怪的间距。

＆＃13;

div

＆＃13;

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;
}

＆＃13;

放置并对齐相同的图片连续

2 个答案: