如何在改变页面宽度的同时保持固定的空白？

Question

请看看我的代码，点击 '运行' 按钮来查看结果：

https://www.w3schools.com/code/tryit.asp?filename=FG1HLL1GNU7B

.outsideDiv { 
 
    background-color: green; 
 
    margin: auto; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    padding: 10px; 
 
} 
 
.insideDiv { 
 
    background-color: yellow; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    display: inline-block; 
 
    border: 1px solid black; 
 
} 
 
.shortItem { 
 
    background-color: white; 
 
    display: block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 7px 17px; 
 
    text-decoration: none; 
 
    float: right; 
 
    margin: 10px; 
 
    border: 1px solid black; 
 
    height: 30px; 
 
    width: 120px; 
 
}

<div class="outsideDiv"> 
 
    <div class="insideDiv"> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    </div> 
 
</div>

我想达到什么是出在这里：

但是我只是无法让它工作。我希望当用户更改页面宽度时，白色项目之间的间隙将保持固定，20px，并且最左边和最右边的项目与黄色div的边框之间的间隔恰好为20px。

我该怎么做？

（你可以改变我的代码，使用上的菜单保存它，然后在这里给出的链接固定码）

谢谢！

Answer 1

是你在找什么。让我知道...如果它好吗？ https://www.w3schools.com/code/tryit.asp?filename=FG1J3XI6KHHM

Answer 2

您只需更改设置为右侧的浮动属性即可。它换到左手和 看到的结果如你预期 Check This

Answer 3

使用display: flex节省一些方面的计算，以定位.innerDiv及其子这将是相同的：

.outsideDiv { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-content: center; 
 
    background-color: green; 
 
    margin: auto; 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    padding: 10px 0; 
 
} 
 
.insideDiv { 
 
    background-color: yellow; 
 
    border: 1px solid black; 
 
    max-width: 90%; 
 
} 
 
.shortItem { 
 
    background-color: white; 
 
    display: inline-block; 
 
    color: black; 
 
    text-align: center; 
 
    padding: 7px 17px; 
 
    margin: 10px 0 10px 20px; 
 
    text-decoration: none; 
 
    border: 1px solid black; 
 
    height: 30px; 
 
    width: 120px; 
 
}

<div class="outsideDiv"> 
 
    <div class="insideDiv"> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    <div class="shortItem"></div> 
 
    </div> 
 
</div>

以整页模式查看图像中的设计。