对齐图像和水平div [英] Align images and div horizontal
本文介绍了对齐图像和水平div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一些代码，将显示5'卡'。但是，当他们被显示，他们都被弄乱了，而不是在一条直线（这是我想要的）。我试图垂直对齐它们，我已经设法得到它，所以他们在一条直线，只是有些是更高，在错误的地方。 我想让它看起来像这样
I have some code that will show 5 'cards'. But, when they are shown they are all messed up and not in a straight line (which is what I want). I have tried to vertically align them and I have managed to get it so they are in a straight line it's just that some are higher and in the wrong places. I want it to look kinda like this
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;
}
推荐答案
对齐卡及其附件将它们分别组合在一起。
First of all, instead of align cards and their attachments seperately group them together.
<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;
}
不要忘记从代码中删除以前的对齐
Don't forget to remove previous aligns from your code
.card{
margin-top: 50px; // remove
float: left; // remove
}
.attatch{
float: left; // remove
}
查看 this 工作示例
这篇关于对齐图像和水平div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
