【发布时间】：2016-05-02 23:31:39
【问题描述】：
我有一些代码可以显示 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;
}
【问题讨论】：
-
我强烈建议您学习 HTML 和 CSS 布局的基础知识。浮动、位置、显示（尤其是 flex）是重要的。您还应该了解 margin、padding、box-sizing。
-
我添加了 position: absolute;进入 CSS 中的 .cards 并正确对齐统计信息。现在所有的卡片都紧紧地放在左边有什么想法吗？
-
我建议你阅读 css-tricks.com/snippets/css/a-guide-to-flexbox 并使用 flex-boxes。
-
当我将 flex 和 order 属性添加到 css 时没有任何反应？
-
我可以解决你的问题，但你会遇到很多其他问题。这就是为什么在做项目之前你应该有点耐心并学习基础知识的原因。我已经按照您尝试学习的方式学习了 css，这是浪费时间。参加 codecademy.com/learn/web 和 Udacity 的另一门中级课程。
标签： javascript html css image