如何在 html 中并排创建两张翻转卡
[英]How do I create two flip cards side by side in html
问题描述
我对编码完全陌生——一直在使用 w3schools 来学习基础知识，并且遇到了一些我似乎无法解决的问题。 基本上我是一个完整的菜鸟，可以使用一些帮助来解决可能是一个非常基本的请求:)
我最近做了关于如何创建翻转卡的教程（这里： https://www.w3schools.com/howto/howto_css_flip_card.asp ）并设法创建自己的，更改字体和图像等。我想知道的是如何在 html 中创建这些网格？
我玩过并且能够创建两张堆叠在一起的翻转卡，但是有没有办法让它们并排（我的意思是附加的非常基本的屏幕截图）。 有没有办法使用上面的模板来做到这一点？
我已经在网上搜索了这个答案，但这些答案是为比我知识更丰富的人准备的——我几周前开始了这个编码之旅！
感谢您的帮助:) 非常感谢
3 个解决方案
解决方案1
0 2021-01-21 12:39:46
向左飘浮; 这样您的第二张卡将与您的第一张卡对齐。
<style> body { font-family: Arial, Helvetica, sans-serif; }.flip-card { background-color: transparent; width: 300px; height: 300px; perspective: 1000px; float:left; //I just added this positioning. }.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%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }.flip-card-front { background-color: #bbb; color: black; }.flip-card-back { background-color: #2980b9; color: white; transform: rotateY(180deg); } </style>
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <div class="flip-card"> <div class="flip-card-inner"> <div class="flip-card-front"> <img src="img_avatar:png" alt="Avatar" style="width;300px:height;300px."> </div> <div class="flip-card-back"> <h1>John Doe</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_avatar:png" alt="Avatar" style="width;300px:height;300px;"> </div> <div class="flip-card-back"> <h1>John Doe</h1> <p>Architect & Engineer</p> <p>We love that guy</p> </div> </div> </div> </body> </html>
解决方案2
0 2021-01-21 12:39:59
您所要做的就是将两张卡片放入一个<div></div>元素中，并为该div赋予display:flex样式
完整代码：HTML：
<div style="display:flex">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</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_avatar.png" alt="Avatar" style="width:300px;height:300px;">
</div>
<div class="flip-card-back">
<h1>John Doe</h1>
<p>Architect + Engineer</p>
<p>We love that guy</p>
</div>
</div>
</div>
</div>
CSS：
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
在 JSFiddle 上： JSFiddle
解决方案3
0 2021-01-21 12:44:02
您可以做的是制作一个容器 div 并将您的卡片放入其中。
HTML
<div class="container">
<div class="card">
<div class="card">
</div>
CSS
.container {
display: flex; //default display items in a row
}
.container .card {
//styling for your card
}
如何创建HTML / PHP表单，其中文本输入字段并排水平对齐
[英]How do I create a HTML/PHP form where the text input fields are horizontally aligned side by side
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.