Question

在一个html5游戏中，我正在创建一个升级商店。我试图让每列中的升级具有相同的高度，但是当其中一段对于一行太长时，它们会以不同的高度显示。这使得列中的行具有不同的大小。

我希望它们的大小相同，但我尝试过的都没有。这是代码片段和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

非常感谢任何帮助，谢谢！

Answer 1

以下是小提琴中的结果以及您在此处添加的代码段...您附加的图片中似乎没有问题..

w3css - 使列div内的div具有相同的高度

1 个答案: