html - 如何在 PC 视图上将我的卡作为二进制组

Question

我正在尝试使用卡片制作页面，在手机上似乎完全可以，但是当我在 PC 上查看时，卡片似乎就在底部。如何使它们看起来像 PC 视图的二进制组？

它看起来像这样：

我想让它们看起来像这样。

<div align="center" class="justify-content-center">
<div class="col-md-6 col-xl-3">
<div class="card-deck">
<div class="card" style="width:330px">
<center><h2 style="color:LightBlue;">CPX</h2>
<div class="card-body">  ```

标签： htmlcss

Answer 1

如果您提供了您的CSS和完整的Html. 社区很容易回答。那么你可以试试这个代码：

*{
  box-sizing: border-box; 
}
.card-deck{           /*Assuming this class as parent of all your cards*/
  column-count: 2;
  column-gap: 2.5rem;  /*According to need*/
}

.card{
  width: 45%;       /*According to need , such that no vertical scroll apear*/
  height: 30%;      /*According to need*/
  padding: 20px;   /*According to need*/
}