内联块div的错误垂直对齐

Question

我有一些内联块div，我希望它们排成一行，而不是像现在一样出现在另一个上面。

这是网页最重要的部分：

HTML：

<div id="hand">
    <div class="card">Y += 1;<br></div>
    <div class="card">if ( Y == 6 &amp;&amp; X &lt; 2 &amp;&amp; X &gt; -2) {<br> Y *= -1;<br> X -= 5;<br> } </div>
</div>

CSS：

#hand {
position: absolute;
display: block;
bottom: 0;
height: 400px;
width: 100%;
text-align: center;
padding-bottom: 60px;
}
.card {
text-align: left;
position: relative;
bottom: 0;
display: inline-block;
width: 200px;
height: 150px;
padding: 30px;
box-shadow: 0 0 0 3px rgb(200,200,200);
border-radius: 10px;
margin: 0 20px;
}

我为你们准备了fiddle。

修改：

我注意到顶部div的最底部字符与底部div的最顶部字符处于同一高度。也许它是文字的东西？

Answer 1

display: inline-block将卡片沿着文字的底部（基线）垂直对齐，因为vertical-align的默认（“初始值”）为基线

将vertical-align: top添加到它的CSS中，一切都应排好。

Answer 2

我在你的卡片类中添加了浮动。如果您想将其与中心对齐，请使用username作为父div。

＆＃13;

＆＃13;

attempt()

＆＃13;

user_id

＆＃13;

＆＃13;

＆＃13;