我希望我的水平滚动图像之间的间距完全相同，如何实现？答案

【问题标题】：I would like for the spacing between my horizontal scrolling images to be exactly the same, how to achieve?我希望我的水平滚动图像之间的间距完全相同，如何实现？
【发布时间】：2019-03-24 14:10:09
【问题描述】：

我的 CSS：

#container {
position: center;
margin-top: 80px;
z-index: 950;
{block:IfGridTheme}margin-left: 430px;{/block:IfGridTheme}
{block:IfNotGridTheme}margin-left: 435px;{/block:IfNotGridTheme}
}

.entry {
position: justify;
font-size: 12px;
color: {color:Body Text}; 
font-family: roboto condensed; 
letter-spacing: 1px; 
{block:PermalinkPage}width: 1000px;
margin-top: 15px;{/block:PermalinkPage}
word-wrap: break-word;
margin-top: 45px;
}

#container1 { 
white-space: nowrap; 
border: none; 
width: 100%;
margin-left: auto; 
margin-right: auto;
} 

#container1 > div { 
background: none; 
width: 100%; 
height: 100%; 
display: inline-block;
padding: 1% 5%; 
margin-right: 176px; 
}

.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}

以及我的特定类型页面的 HTML：

<div id="container1">
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="LINKTOFIRSTIMAGE" height="575" src="LINKTOFIRSTIMAGE" />
<div class="captioning">
<div class="caption"><em>CAPTION</em></div>
</div>
</div>
</div>
</div>
<div>
<div class="picture_holder" style="width: 1080px;">
<div class="picture" style="width: 1080px;"><img alt="SECONDIMAGELINKANDSOFORTH" height="575" src="SECONDIMAGELINKANDSOFORTH" />
<div class="captioning">
<div class="caption"></div>
</div>
</div>
</div>
</div>
</div>

在给定页面上，一系列图像的高度、宽度和整体纵横比完全相同，它们之间的间距与1) 中的间距完全相同（尽管比我想要的宽很多）这张图：

...但是在一系列具有相同高度但宽度变化很大的图像中，间距与2) 中的间距非常接近。

我个人也不想要。如何更改我的代码，以便对于这两种类型的页面以及我计划创建的更多页面，每个 image 之间的间距在整个板上的像素数量完全相同网站？这些图像周围是否有一个假想的框导致问题？

编辑：我还应该声明我在网站 Tumblr.com 上使用 HTML 功能，因此 flex 等某些属性似乎永远不可用。

edit2: display: grid; 和类似的似乎也不可用。如果有帮助，这也位于代码的顶部：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

感谢您到目前为止提供的信息。

【问题讨论】：

你的实现是错误的。使用 css flex 就完成了。
怎么样？我在每个元素下使用display: flex; 进行了测试，但主要问题似乎是我正在使用的网站似乎无法识别“flex”，因为当我输入它时它没有突出显示为某种颜色其余的部分。与flex-wrap 和flex-grow 以及其他相同。 @RichardPariath
Flex 应该在容器中使用，而不是在单个元素上使用。我写了一个简短的代码作为答案。也许这可以帮助

标签： html css image spacing

【解决方案1】：

你的html结构：

<div id="parent_container">
          <div id="card_1" class="card_properties">
            <h3>Title to image 1</h3>
            <img style="background:red">
            <caption>Card 1 caption</caption>
          </div>
          <div id="card_2" class="card_properties">
              <h3>Title to image 1</h3>
               <img style="background:violet">
            <caption>Card 2 caption</caption>
          </div>
          <div id="card_3" class="card_properties">
              <h3>Title to image 1</h3>
              <img style="background:seagreen">
            <caption>Card 3 caption</caption>
          </div>
          <div id="card_4" class="card_properties">
              <h3>Title to image 1</h3>
            <img style="background:skyblue">
            <caption>Card 4 caption</caption>
          </div>
        </div>

你的 CSS 结构：

  #parent_container <=== setting up flex for container
  {
    display: flex;
    flex-wrap: wrap;  <=== makes sure if the cards are many then they go on next line
    justify-content: space-evenly;  <=== makes sure there is equal space
  }
  .card_properties
  {
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    border-radius: 14px;
    width:20vw;
    height:200px;
    padding:1em;
  }

  img  <=== written this additional because I didn't have time to find image
  {
   width: 100%;
   height: 120px;
   border-radius: 14px
  }

Working codepen example

【讨论】：

感谢您的帮助！但是，每当我键入它们时，所有flex 属性都不会突出显示或似乎有效，而且我不清楚如何使用图像和卡片的代码来扩展不同的宽度并仍然保持在同一行上。还有其他与 flex 非常相似的东西吗？
如果 flex 属性没有突出显示，那么它可能与您使用的 IDE 有关。首选项可能未设置为 CSS3。 Flex 自动调整宽度变化，如果你想保持在同一行，你可以使用flex-wrap:no-wrap 保持在同一行。另一种替代方法是使用 CSS-Grids。进一步参考Grids 和Flex。在我的答案中附加了工作代码笔。
这些参考是有道理的，看起来这将是一个解决方案，但我仍然无法突出显示。我在 Google 上找不到任何同时引用“IDE”或“CSS3”和 Tumblr 编辑器的内容。我注意到引用xhtml1 的整体代码（我编辑到OP）顶部的一些东西，我尝试用DTD链接替换它，一个没有做任何事情的更新的html？ grid、flex、fit-content等都不要高亮；我如何像你说的那样改变偏好？