ページ幅を変更しながら固定ギャップを維持する方法は？

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>

を：

しかし、私はそれを機能させることができません。私は、ユーザーがページの幅を変更したときに、白い項目間のギャップが固定されたままになることを望みます。また、最も左側の項目と最も右側の項目と黄色のdivの枠線の間の隙間は正確に20pxになります。

どうすればいいですか？

（あなたは、私のコードを変更し、上のメニューを使用して、それを保存し、固定コードにここにリンクを与えることができます）

ありがとう！

Answer 1

あなたが探しているものです。私に教えてください...その大丈夫かどうか？ https://www.w3schools.com/code/tryit.asp?filename=FG1J3XI6KHHM

Answer 2

右に設定されているfloatプロパティを変更するだけで済みます。 .innerDivとその子を配置する点で計算の一部を保存し、左にそれを変更し、 あなたがdisplay: flexを使用し Check This

Answer 3

を期待通りの結果が、それは同じだろう参照してください。

.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>

に

フルページモードで画像を見てみましょう。