Html 在手机上对齐一组翻盖盒
我没有任何HTML或CSS的背景知识。我一直在想如何改变现有的代码来帮助制作网站的各个部分。唯一的问题是我不能让它移动友好。我编写了一个代码来创建8个翻盖盒，当你在计算机上访问网站时可以使用。然而，它们在移动设备上工作得不太好。我真的不知道我在做什么，但我是否可以在一列中对齐8个框，以便移动使用，并使用触摸键使它们翻转？谢谢Html 在手机上对齐一组翻盖盒,html,css,mobile,Html,Css,Mobile,我没有任何HTML或CSS的背景知识。我一直在想如何改变现有的代码来帮助制作网站的各个部分。唯一的问题是我不能让它移动友好。我编写了一个代码来创建8个翻盖盒，当你在计算机上访问网站时可以使用。然而，它们在移动设备上工作得不太好。我真的不知道我在做什么，但我是否可以在一列中对齐8个框，以便移动使用，并使用触摸键使它们翻转？谢谢 <!DOCTYPE html> <html> <head> <link href=https://fonts.google
<!DOCTYPE html>
<html>
<head>
<link href=https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900|Ubuntu:400,500,700 rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: 'Montserrat', sans-serif;
font-weight: 300; /* black */
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
align-items: center;
grid-gap: 8px;
}
.flip-card {
background-color: transparent;
width: 275px;
height: 250px;
perspective: 1000px;
}
.flip-card-inner {
border-style: hidden;
position: relative;
width: 100%;
height: 100%;
text-align: left;
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: white;
color: #152939;
text-align: center;
}
.flip-card-back {
background-color: white;
color: black;
transform: rotateY(180deg);
line-height: 1.25;
}
li{
margin: 10px 0;
}
.vertical-center {
margin: 0;
position: absolute;
top: 45%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
</head>
<body>
<section id="team">
<div class="container">
<div class="grid">
<!-- #stakeholder benefits -->
<!-- #regulatory agencies -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Regulatory<br />Agencies</h2>
<img src=https://i.ibb.co/t8ghC7J/Regulatory-Agencies.png alt="Regulatory-Agencies" width= "110">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Real-time monitoring & auditing</li>
<li style="font-size:15px;">No need to go on-site to   review necessary paperwork</li>
<li style="font-size:15px;">Access to digital database on contamination levels, origin and destination(s)</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #generators -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Generators<br />   </h2>
<img src=https://i.ibb.co/pj0M0cZ/Generator.png alt="Generator" width= "110">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Access to real-time project updates</li>
<li style="font-size:15px;">Limit exposure to regulatory penalties</li>
<li style="font-size:15px;">Accurately forecast and   reduce costs with start-to-finish project insights</li>
<li style="font-size:15px;">Cost-effective</li>
</div>
</div>
</div>
</div>
<!-- #environmental consultants -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Environmental Consultants</h2>
<img src=https://i.ibb.co/wQsdBgk/Environmental-Consultants.png alt="Environmental-Consultants" width="110">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Easier vetting to review credentials of necessary companies</li>
<li style="font-size:15px;">Single and centralized repository to access all   relevant documents</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #remediation consultants -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Certified Remediation Contractors</h2>
<img src=https://i.ibb.co/tBczP7M/Certified-Remediation-Contractors.png alt="Certified-Remediation-Contractors" width= "100">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Digital manifests save time, space, energy and money</li>
<li style="font-size:15px;">Improve trucker   management</li>
<li style="font-size:15px;">Easily post jobs in need of additional compliant     truckers</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #remediation professionals -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Remediation Professionals<br />(i.e. LSRPs)</h2>
<img src=https://i.ibb.co/rm6KSMZ/Remediation-Professionals.png alt="Remediation-Professionals" width="100">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<li style="font-size:15px;">Minimize paperwork by receiving necessary documents in the cloud</li>
<li style="font-size:15px;">Streamlined updates to Regulatory Agencies</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #material truckers -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Material Truckers <br />   </h2>
<img src=https://i.ibb.co/xGdP24b/Truckers.png alt="Truckers" width= "120">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Easier hiring process with ability to upload credentials and list references for new   jobs</li>
<li style="font-size:15px;">Eliminates need to call for or save paper manifest receipts</li>
<li style="font-size:15px;">Faster pay through direct invoicing</li>
<li style="font-size:15px;">Post available trucks for hire</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #disposal facilities -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Disposal Facilities <br />   </h2>
<img src=https://i.ibb.co/4KCPWxB/Disposal-Facilities.png alt="Disposal-Facilities" width="110">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<br />
<ul>
<li style="font-size:15px;">Go green - no need to buy paper and printer cartridges   to print paper manifests</li>
<li style="font-size:15px;">Easier manifest delivery - assign electronically to truckers ahead of time, no need to sign paper manifests at origin and destination</li>
</ul>
</div>
</div>
</div>
</div>
<!-- #material testing labs -->
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Material Testing<br />Labs</h2>
<img src=https://i.ibb.co/t8xWnfv/Material-Testing-Labs.png alt="Material-Testing-Labs" width="110">
</div>
<div class="flip-card-back">
<div class="vertical-center">
<ul>
<br />
<li style="font-size:15px;">Share results faster by integrating with TerraTrackr database</li>
<li style="font-size:15px;">Upload testing lab results   and assign a unique project   ID for easy organization</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
身体{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：300；/*黑色*/
}
.电网{
显示：网格；
网格模板列：重复（4，1fr）；
证明项目：中心；
对齐项目：居中；
栅隙：8px；
}
.翻盖卡片{
背景色：透明；
宽度：275px；
高度：250px；
透视图：1000px；
}
.翻转卡内部{
边框样式：隐藏；
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：左对齐；
转变：转变0.6s；
变换样式：保留-3d；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
}
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
.翻转卡正面，
.把卡片翻回去{
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
.翻转卡正面{
背景色：白色；
颜色：#152939；
文本对齐：居中；
}
.把卡片翻回去{
背景色：白色；
颜色：黑色；
变换：旋转（180度）；
线高：1.25；
}
李{
利润率：10px0；
}
.垂直中心{
保证金：0；
位置：绝对位置；
最高：45%；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
监管机构
实时监控和审核
- 无需现场访问&ensp；审查必要的文书工作
访问关于污染程度、来源和目的地的数字数据库
发电机
&ensp；
访问实时项目更新
限制受到监管处罚的风险
准确预测和预测ensp；利用从开始到结束的项目洞察力降低成本
经济高效
环境顾问
更容易审查必要公司的资质
-
认证补救承包商
数字舱单节省时间、空间、能源和金钱
改进卡车司机和ensp；管理层
- 轻松发布需要额外符合ensp要求的作业&ensp；卡车司机
补救专业人员（即LSRP）
- 通过在云中接收必要的文档来减少文书工作
简化了对监管机构的更新
材料卡车司机
&ensp；
-
无需调用或保存纸质清单收据
通过直接开票更快地支付
张贴可供租用的卡车
处置设施
&ensp；
绿色环保-无需购买纸张和打印机墨盒&ensp；打印纸质舱单
- 更方便的舱单交付-提前以电子方式分配给卡车司机，无需在始发地和目的地签署纸质舱单
材料测试实验室
通过与TerraTrackr数据库集成，更快地共享结果
上传测试实验室结果&ensp；并指定一个独特的项目&ensp；易于组织的ID
身体{
字体系列：“蒙特塞拉特”，无衬线；
字体大小：300；/*黑色*/
}
.电网{
显示：网格；
宽度：自动；
保证金：0自动；
网格模板列：重复（2，1fr）；
证明项目：中心；
对齐项目：居中；
栅隙：8px；
}
@仅媒体屏幕和（最小宽度：768px）{/*桌面*/
.电网{
网格模板列：重复（4，1fr）；
}
}
.翻盖卡片{
B
.grid {
align-items: center;
flex-direction: row;
display: flex;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}