イメージの整列と水平方向の整列

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; 
} 

のようにちょっと見てみたいです0

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 
} 

を前の整列を削除することを忘れないでください揃えるthis実施例