對齊圖像並水平對齊div

Question

我有一些代碼將顯示5張“卡片”。 但是，當它們顯示出來時，它們全都弄亂了，而不是一條直線（這就是我想要的）。 我試圖垂直對齊它們，但設法將它們對齊，只是它們中的一些較高且在錯誤的位置。 我希望它看起來像這樣

的HTML

        <main>
            <center>
                <button class="open"  id="conferm" onclick="opencards()">Open Cards.</button>
                <br />
                <img class="card" src="images/blank.png" id="canvas" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s1"></span></div>
                    <div class="stats">Health: <span id="s2"></span></div>
                    <div class="stats">Worth: <span id="s3"></span></div>
                    <div class="stats">Intelligence: <span id="s4"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas1" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s5"></span></div>
                    <div class="stats">Health: <span id="s6"></span></div>
                    <div class="stats">Worth: <span id="s7"></span></div>
                    <div class="stats">Intelligence: <span id="s8"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas2" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s9"></span></div>
                    <div class="stats">Health: <span id="s10"></span></div>
                    <div class="stats">Worth: <span id="s11"></span></div>
                    <div class="stats">Intelligence: <span id="s12"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas3" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s13"></span></div>
                    <div class="stats">Health: <span id="s14"></span></div>
                    <div class="stats">Worth: <span id="s15"></span></div>
                    <div class="stats">Intelligence: <span id="s16"></span></div>
                </div>
                <img class="card" src="images/blank.png" id="canvas4" />
                <div class="attatch">
                    <div class="stats">Dammage: <span id="s17"></span></div>
                    <div class="stats">Health: <span id="s18"></span></div>
                    <div class="stats">Worth: <span id="s19"></span></div>
                    <div class="stats">Intelligence: <span id="s20"></span></div>
                </div>
            </center>
        </main>

JAVASCRIPT

var cards = new Array("images/1.png", "images/2.png", "images/3.png", "images/4.png", "images/5.png","images/6.png", "images/7.png", "images/8.png", "images/9.png");

function opencards(){
    var pc = document.getElementById("packprice").innerHTML;
    var cc = document.getElementById("cash").innerHTML;
    var cash = Number(cc) + 50;
    var cardnum = Math.floor(Math.random() * cards.length);
    var s1 = Math.floor(Math.random() * 100);
    var s2 = Math.floor(Math.random() * 100);
    var s3 = Math.floor(Math.random() * 100);
    var s4 = Math.floor(Math.random() * 100);
    var s5 = Math.floor(Math.random() * 100);
    var s6 = Math.floor(Math.random() * 100);
    var s7 = Math.floor(Math.random() * 100);
    var s8 = Math.floor(Math.random() * 100);
    var s9 = Math.floor(Math.random() * 100);
    var s10 = Math.floor(Math.random() * 100);
    var s11 = Math.floor(Math.random() * 100);
    var s12 = Math.floor(Math.random() * 100);
    var s13 = Math.floor(Math.random() * 100);
    var s14 = Math.floor(Math.random() * 100);
    var s15 = Math.floor(Math.random() * 100);
    var s16 = Math.floor(Math.random() * 100);
    var s17 = Math.floor(Math.random() * 100);
    var s18 = Math.floor(Math.random() * 100);
    var s19 = Math.floor(Math.random() * 100);
    var s20 = Math.floor(Math.random() * 100);
    document.getElementById("canvas").src = cards[cardnum];
    document.getElementById("s1").innerHTML = s1;
    document.getElementById("s2").innerHTML = s2;
    document.getElementById("s3").innerHTML = s3;
    document.getElementById("s4").innerHTML = s4;
    document.getElementById("canvas1").src = cards[cardnum];
    document.getElementById("s5").innerHTML = s5;
    document.getElementById("s6").innerHTML = s6;
    document.getElementById("s7").innerHTML = s7;
    document.getElementById("s8").innerHTML = s8;
    document.getElementById("canvas2").src = cards[cardnum];
    document.getElementById("s9").innerHTML = s9;
    document.getElementById("s10").innerHTML = s10;
    document.getElementById("s11").innerHTML = s11;
    document.getElementById("s12").innerHTML = s12;
    document.getElementById("canvas3").src = cards[cardnum];
    document.getElementById("s13").innerHTML = s13;
    document.getElementById("s14").innerHTML = s14;
    document.getElementById("s15").innerHTML = s15;
    document.getElementById("s16").innerHTML = s16;
    document.getElementById("canvas4").src = cards[cardnum];
    document.getElementById("s17").innerHTML = s17;
    document.getElementById("s18").innerHTML = s18;
    document.getElementById("s19").innerHTML = s19;
    document.getElementById("s20").innerHTML = s20;
    document.getElementById("cash").innerHTML = cash;
};

的CSS

.card{
    margin-top: 50px;
    height: 300px;
    width: 200px;
    float: left;
}
.stats{
    vertical-align: middle;
}
.attatch{
    float: left;
    width: 200px;
    height: 72px;
    border: 2px solid black;
}

Answer 1

首先，不是對齊卡及其附件，而是將它們單獨組合在一起。

 <div class =card-group>
     <img class="card" src="images/blank.png" id="canvas" />
        <div class="attatch">
           <div class="stats">Dammage: <span id="s1"></span></div>
           <div class="stats">Health: <span id="s2"></span></div>
           <div class="stats">Worth: <span id="s3"></span></div>
           <div class="stats">Intelligence: <span id="s4"></span</div>
        </div>
 </div>

然后對齊這些組

.card-group {
  float: left;
  margin: 10px;
}

不要忘記從代碼中刪除以前的對齊方式

.card{
    margin-top: 50px; // remove
    float: left;      // remove
}

.attatch{
    float: left;      // remove
}

看一下這個工作示例