为什么卡组 div 没有对齐卡牌？

Question

不知道为什么这顶牌组没有对齐我的牌!我已经成功地运行了代码，只是卡，当我添加卡组，我希望卡对齐相同的高度和宽度，但什么都没有发生。卡片仍然在同一列。请帮助!

<div class="card-deck">
<div class="card">
<div class="card-header">
<h3>Chihuahua</h3>
</div>
<div class="card-body">
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Labrador</h3>
</div>
<div class="card-body">
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</div>
</div>

Answer 1

首选

你试过使用"Inline-Block"作为属性显示的值?那么，试着把这段代码包含在文档的头部:

<style>
.card{background-color: aliceblue; display: inline-block;}

</style>

这将使卡片排成一行，如果你想这样做，你仍然可以设置它们的宽度和高度。

---

第二选择

您还可以在父容器中使用灵活显示作为第二种解决方案。这将允许你设置一个间隙(卡片之间的空间)并调整它们。

<style>
/* If you want to set a gap, include the property gap and set a value */
.card-deck{display: flex; /* gap: 1vw */}

</style>

如果你想了解更多关于flex容器和如何使用它们的信息，我推荐你这个网站:

https://www.w3schools.com/css//css3_flexbox_container.asp