Выравнивание изображений и div по горизонтали

У меня есть код, который отобразит 5 'карт'. Но, когда их показывают, они все испорчены, а не по прямой (это то, что я хочу). Я попытался вертикально выровнять их, и мне удалось получить их так, чтобы они были в прямой линии, это просто, что некоторые из них выше и в неправильных местах. Я хочу, чтобы это выглядело вроде как этот Выравнивание изображений и div по горизонтали

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

источник

2016-05-02 Morgan Clarke

Я настоятельно рекомендую вам изучить основы макетов в HTML и CSS. float, position, display (особенно flex) являются важными. Вы также должны знать о марже, отступы, размер окна. – Thoran

Я добавил положение: абсолютное; в .cards в CSS, и он правильно выравнивает статистику. Теперь все карты сгруппированы слева от всех идей? –

Предлагаю вам прочитать https://css-tricks.com/snippets/css/a-guide-to-flexbox/ и использовать гибкие коробки. – Thoran

Прежде всего, вместо выравнивания карт и их вложений отдельно группировать их.

<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 рабочий пример

источник

2016-05-02 15:31:39 cmlonder

Спасибо, что я очень хотел. –

Выравнивание изображений и div по горизонтали

ответ

Смежные вопросы