w3css - 列div内のdivを同じ高さに設定する

html5のゲームでは、私はアップグレードストアを作成しています。私は各列のアップグレードを同じ高さにしようとしていますが、パラグラフの1つが1行では長すぎると異なる高さで表示しています。列の行を異なるサイズにしています。w3css - 列div内のdivを同じ高さに設定する

here is an image of the result

私は彼らが同じサイズになりたいが、私は試してみました何も作業していません。ここにコードスニペットと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

すべてのヘルプは非常に感謝をいただければ幸いです！ここで

出典

2016-06-14 Josh Gil

フィドルやコード内の結果であり、私が実行している場合は

出典

2016-06-14 05:30:39

..あなたは、添付写真の一つとして問題があるように思えません...あなたがここに追加スニペットそれはクロムで購入コードブロックの強さ段落は2つの列を取るが、売りコードブロックの強さ段落は1つを取る。私は、少なくとも中間の水平線が接続されているか、または2つの行の段落を持つものと同じサイズを持つ他のアップグレードをさらに良くするようにしたいと思います。 –

w3css - 列div内のdivを同じ高さに設定する

答えて

関連する問題