小贝子编程

如何在 html 中的多个翻转卡中添加网格



我正在尝试整理彼此相邻放置的翻转卡。为此，我需要网格来分隔我的卡。这样我的卡片在有人第一次看到它时看起来不错。

我已经尝试将网格应用于我的翻转卡，但它们垂直对齐，就像 120 张卡片垂直对齐一样。我不知道出了什么问题。

我刚刚链接了与翻转卡相关的样式，也因为我的代码很长，我只选择了 5 张翻转卡。因此，请在设计时考虑每个分区 40 张卡片。将卡片分为 3 个部分。

所以我想要一排 5/4 张牌。

我还想知道，如何为卡片上应用的网格添加样式

.flip-card {
border-style: hidden;
background-color: transparent;
width: 120px;
height: 120px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #222e36ef;
color: white;
transform: rotateY(180deg);
}
<section id="team">
<div class="container">
<div class="section-header wow fadeInUp">
<h3>Heroes</h3>
<p><b>HEROES</b> rating according to Meta changes</p>
</div>
<div style="width: 100%; text-align: left; padding: 5px 2px; clear: both;"><img alt="" src="img/heroes_thumbnail/heroes_thumbnail_large/strength.PNG" width="100" height="100" loading="lazy" /> Strength </div>
<div class="row">
<!-- #str heroes -->
<!-- #abaddon -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;">
</div>
<div class="flip-card-back">
</br>
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;">
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;">
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;">
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>

用div 和样式包装您的卡片

，如下所示：
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr); /*grid with 4 columns .. edit the number to change grid columns*/
justify-items: center;
align-items: center;
grid-gap: 15px;
}

例：

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
grid-gap: 15px;
}
.flip-card {
border-style: hidden;
background-color: transparent;
width: 120px;
height: 120px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #222e36ef;
color: white;
transform: rotateY(180deg);
}
<section id="team">
<div class="container">
<div class="grid">
<!-- #str heroes -->
<!-- #abaddon -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/abaddon_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<br />
<p>WR : 50%</p>
<p>PR : 50%</p>
</div>
</div>
</div>
<!-- #alchemist -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/alchemist_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #axe -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/axe_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
<!-- #beastm -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img/heroes_thumbnail/heroes_thumbnail_large/beastmaster_lg.png" alt="Avatar" style="width:120px;height:120px;" />
</div>
<div class="flip-card-back">
<h1>Win Rate</h1>
<p>Architect & Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
</div>
</section>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium