w3css - Making Divs innerhalb der Spalte divs haben die gleiche Höhe

Question

In einem HTML5-Spiel, das ich mache, habe ich einen Upgrades Store erstellt. Ich versuche, die Upgrades in jeder Spalte auf die gleiche Höhe zu bringen, aber sie werden mit unterschiedlichen Höhen angezeigt, wenn einer der Absätze für eine Zeile zu lang ist. was die Zeilen in den Spalten unterschiedlich groß macht.

here is an image of the result

Ich möchte, dass sie die gleiche Größe sein, aber nichts, was ich versucht habe funktioniert. Hier ist das Code-Snippet und die Jsfiddle.

<link href="http://www.w3schools.com/lib/w3.css" rel="stylesheet"/> 
 
<div class="w3-row w3-border w3-border-black code-blocks-upgrades" style="display: flex; width: 1111px; margin: 0; padding: 0"> 
 
    <div class="w3-col l6 m6 s6" style="display: flex; flex-direction: column; flex: 1"> 
 
    <div class="w3-row w3-center w3-border-top w3-border-left w3-border-right w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="buy-code-blocks-speed-label" class="w3-small" style="display: table-cell; vertical-align: middle">Buy Code Blocks Speed ($1000.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    <div class="w3-row w3-center w3-border w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="buy-code-blocks-strength-label" class="w3-small" style="display: table-cell; vertical-align: middle">Buy Code Blocks Strength ($1000.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="w3-col l6 m6 s6" style="display: flex; flex-direction: column; flex: 1"> 
 
    <div class="w3-row w3-center w3-border-top w3-border-right w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="sell-code-blocks-speed-label" class="w3-small" style="display: table-cell; vertical-align: middle">Sell Code Blocks Speed ($100.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    <div class="w3-row w3-center w3-border-top w3-border-bottom w3-border-right w3-border-black w3-padding-small" style="display: flex; align-items: center; flex: 1"> 
 
     <div class="w3-col l5 m5 s5" style="display: table; height: 26px"> 
 
     <p id="sell-code-blocks-strength-label" class="w3-small" style="display: table-cell; vertical-align: middle">Sell Code Blocks Strength ($100.00): </p> 
 
     </div> 
 
     <div class="w3-col l7 m7 s7 w3-left-align" style="display: flex; flex-direction: row"> 
 
     <button class="w3-btn w3-yellow w3-small w3-padding-small" onclick="game.convert_amount(event, 1, 'code_blocks_strength');">1</button> 
 
     <button class="w3-btn w3-orange w3-small w3-padding-small" onclick="game.convert_amount(event, 10, 'code_blocks_strength');">10</button> 
 
     <button class="w3-btn w3-red w3-small w3-padding-small" onclick="game.convert_amount(event, 100, 'code_blocks_strength');">100</button> 
 
     <button class="w3-btn w3-black w3-small w3-padding-small" onclick="game.convert_amount(event, 'max', 'code_blocks_strength');">Max</button> 
 
     <input class="w3-small w3-border w3-border-black" style="height: 26px; width: 50px; flex: 1" type="text" placeholder="Custom" onkeypress=""> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Here is the JSFiddle

Jede Hilfe wäre sehr geschätzt Dank! Hier

Answer 1

ist das Ergebnis in Geige und die Code-Snippet fügen Sie hier ... Es ist kein Problem, da die auf dem Bild zu sein scheint Sie angebracht ..