Question

我正在重新构建Google Chrome主页，但我在页面底部的空格处停留。我无法使它们完美。其中两个图标没有变线。

与我得到的相比，这里是我所需要的

侧面的空间太小，中间的空间又大。
如果我可以以某种方式使中间的空间变小而侧面的空间变大，那么我可以复制第一张图像

我尝试了
justify-content: space-between;
和
justify-content: space-around;
和
justify-content: space-even; 他们不起作用

这是我的html

<div class='mostUsedApps'>
    <div class='row'>
    <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>

这是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 {
    width: 256px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
}
.row {
    padding: 120px 0 0 424px;
    height: 112px;
    width: 525px;
    display: flex;
}

任何想法我该怎么做的，谢谢（：

Answer 1

我已使用justify-content: space-around; CSS正常工作。您将固定宽度设置为row div，我已经设置了此width:auto。现在您可以使用此代码，希望对您有所帮助。

.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 {
    width: 61px;
    height: 61px;
    display: inline-block;
    background-repeat: no-repeat;
    background-color: red;
    border-radius: 50%;
background-size: 100% auto;
background-position: center;
}
.row {
    padding: 0;
    height: 112px;
    width: auto;
    display: flex;
    justify-content: space-around;
    display: -webkit-flex;
    -webkit-justify-content: space-around;
}

    <div class='mostUsedApps'>
     <div class='row'>
        <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>

Answer 2

要使内嵌div之间实现完美的中心对齐，可以在text-align: center div上使用display: inline-block。

div.container {
  text-align: center;
}

div.icon {
  width: 30px;
  height: 30px;
  
  display: inline-block;
  margin: 10px;
  
  background-color: #eee;
  border-radius: 100%;
}

<div class="container">
  <div class="icon youtube"></div>
  <div class="icon facebook"></div>
  <div class="icon gmail"></div>
  <div class="icon site4"></div>
  <div class="icon site5"></div>
  <div class="icon site4"></div>
</div>

Answer 3

.rowCell {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size:50%;
    background-position:center;
    border:1px solid #000;
    display:inline-block;
    }

在div之间添加空白

3 个答案: