如何连续添加 7 张图片 html 和 css [关闭]答案

【问题标题】：How do I add 7 images in a row html & css [closed]如何连续添加 7 张图片 html 和 css [关闭]
【发布时间】：2022-11-17 17:24:09
【问题描述】：

如何在不添加 Jquery 或 JavaScript 的情况下使用纯 HTML 和 CSS 将 7 张图片排成一行？

我还没有尝试过这个，但我想知道，因为这是一个即将到来的项目

【问题讨论】：

给他们一个 calc(100%/7) 的 CSS width。父母也应该有white-space:nowrap
看看 css flexbox
我认为对于即将进行的项目，您最好自己学习它

标签： html css

【解决方案1】：

我建议使用两种流行的布局系统 grid 或 flex。就我个人而言，我会使用网格，因为与 flex imo 相比，它更容易拥有相同大小的孩子。我想现在很多开发人员也更喜欢使用网格而不是 flex 来做这样的事情。

HTML

  <div class="grid-container">
   <img src="..." alt="" /> 
   <img src="..." alt="" /> 
   <img src="..." alt="" /> 
   <img src="..." alt="" />
   <img src="..." alt="" /> 
   <img src="..." alt="" /> 
   <img src="..." alt="" /> 
   <img src="..." alt="" /> 
  </div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(7, 100px) 
}

如果你想使用 flex，那么你可以在孩子上使用 flex: 1，但在某些情况下，孩子的大小不会相同。

【讨论】：

【解决方案2】：

你也可以使用 flexbox 来计算 full with 然后划分空间：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

这实际上是评论，而不是答案。我明白您可能还没有足够的声誉离开 cmets 但请不要使用答案系统作为替代品。获得声誉相当容易，只需要您付出一点努力。谢谢！