如何在css的直线上给出各个图像之间相等的间距？

Question

我有截图如下所示，我必须在HTML / CSS中复制。

此时，我可以在fiddle中复制此内容。

在小提琴中，我无法在各个图像之间提供相当大的间距。

在小提琴中，我有一种感觉，以下CSS代码存在问题：

select sd.* 
-- delete sd
from SampleData sd
join (
    select Member_ID, Problem_ID,
        MaxCompleted = max(case when [Status] = 'Completed' THEN Version_ID else 0 END),
        MinErrored = min(case when [Status] = 'Error' THEN Version_ID else null end)
    from SampleData
    group by Member_ID, Problem_ID) as rm on
    sd.Member_ID = rm.Member_ID
    and sd.Problem_ID = rm.Problem_ID
    and sd.Version_ID > rm.MaxCompleted
    and sd.Version_ID <= rm.MinErrored

问题陈述：

如上所述，在小提琴中，我无法在各个图像之间给出相等的间距。

我想知道我应该在小提琴中做些什么改变，这样我才能在各个图像之间给出相当大的间距。

Answer 1

根据您需要支持的浏览器，您可以使用flexbox。 所以如果你有以下html：

<div class="container">
  <img src="" />
  <img src="" />
  <img src="" />
  <img src="" />
</div>

然后写下面的css：

.container {
  display: flex;
  justify-content: space-between;
}

有关更多示例，请参阅mdn。