使用背景图像更改div之间的弹性间距

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用背景图像更改div之间的弹性间距相关的知识,希望对你有一定的参考价值。

嗨我正在改造谷歌浏览器主页,但我似乎无法做到页面底部的部分最常用的应用程序是我试图用显示flex,因为它把它内联但我不能得到正确的间距它不均匀或大或小这里是我想要它看起来像... enter image description here

这就是我得到的

enter image description here enter image description here enter image description here最重要的是我需要得到的。请注意,间距是小的,在中间它是大到我正在寻找它是正确的对齐 - 内容似乎不影响间距?这是css

.youtube{
background-image: url(youtube.png);


}
.facebook{
background-image: url(facebook.png);

}

.roblox{
background-image: url(roblox.png);


}

.Agar{
 background-image: url(Agar.png);


  }

    .gmail{
background-image: url(gmail.png);


 }
  .rowCell{
justify-content: space-around;
align-items: center;
position: relative;  
background-repeat: no-repeat;
width: 200px;
height: 150px;
margin-top: -589px;
left: 422px;
 }
  .mostUsedApps{
     width: 42%;
display: flex;
justify-content: space-between;
justify-content: space-around;
align-items: center;
}

这是html

   <div class = 'mostUsedApps'>

   <div class = 'youtube rowCell'></div>

   <div class = 'facebook rowCell'   ></div>

   <div class = 'roblox rowCell'></div>


   <div class = 'Agar rowCell'></div>

   <div class = 'gmail rowCell'></div>

   </div>

非常感谢任何帮助,谢谢:)

答案

如果您的图标大小相同,那么您只需在父div上使用justify-content属性,即“mostUsedApps”。

如果它们的大小不同,那么您需要提供指向codepen或codesandbox的链接,而不需要提供帮助。

以上是关于使用背景图像更改div之间的弹性间距的主要内容,如果未能解决你的问题,请参考以下文章

我正在尝试使用 php 和 jquery.php 变量更改 div 的背景图像,但未获取值

使用 jQuery 在多个背景图像之间切换的更好方法

更改背景图像不透明度

无法在 jQuery 中更改 div 的背景图像

使用 javascript 动态更改 <div> 背景图像

使用颜色选择器更改片段中edittext的背景颜色