我是 WordPress 新手，所以请耐心等待。我有两张卡片，在 vscode 上看起来不错，但在 wordpress 中，两张卡片之间的间隙不正确，但 css 的其余部分工作正常。
我使用 kadence 主题和简单的 css 插件。 这是我的 HTML：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Effect</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/95a02bd20d.js"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="face face1">
<div class="content">
<i class="fas fa-camera"></i>
<h3 style="font-family:Didot, serif; ">PHOTOGRAPHIE</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p style="font-family:Didot, serif; "> Chaque cliché devient une pièce maîtresse de votre stratégie</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="face face1">
<div class="content">
<i class="fas fa-video"></i>
<h3 style="font-family:Didot, serif; ">VIDEOGRAPHY</h3>
</div>
</div>
<div class="face face2">
<div class="content">
<p style="font-family:Didot, serif; ">Propulsez votre marque et stimuler l'engagement .</p>
<a href="#" type="button">Read More</a>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
这是我的 CSS：
body {
display: flex;
margin: 0;
padding: 0;
min-height: 100vh;
background: #444;
justify-content: center;
align-items: center;
font-family: arial;
}
.container {
max-width: 700px; /* Adjust the maximum width as per your preference */
width: 100%;
box-sizing: border-box;
padding: 0 20px;
display: flex;
justify-content: center; /* Center the cards */
gap: 40px; /* Add some space between the cards */
}
.container .card {
flex: 1 1 calc(40% - 20px); /* Adjust the card width and keep some space between them */
margin-bottom: 20px;
}
.container .card .face {
width: 100%;
height: 200px;
transition: 0.4s;
}
/* Responsive styles for smaller screens */
@media only screen and (max-width: 768px) {
.container {
padding: 0;
}
.container .card {
width: 100%;
margin-left: 0;
}
}
.container .card .face.face1 {
position: relative;
background: #333;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
z-index: 1;
transform: translateY(100px);
transition: transform 0.8s ease-in-out; /* Ajout de la transition */
transform: translateY(100px);
}
我尝试弄乱边距而不是使用“间隙”，但没有任何变化。
好吧，让我们检查一下您的问题。您提到您的卡片在 Visual Studio Code 中显示正确，但在 WordPress 中显示不正确，特别是关于两张卡片之间的间距。
从你的CSS中，你使用的是gap: 40px;在 .container 类中在卡片之间创建空间。但是，您使用的 WordPress 或 Kadence 主题似乎可能没有考虑此 CSS 属性。
以下是解决此问题的一些建议：
直接在卡片上使用边距： 不要在 .container 中使用间隙，而是尝试直接在卡片上应用边距。您可以修改 .container .card 类以包含侧边距：
CSS 复制代码
.container .card {
flex: 1 1 calc(40% - 20px);
margin: 0 10px; /* Adds margin on both sides */
margin-bottom: 20px;
}
这将在每张卡片的每一侧添加 10 像素的边距。
检查 Kadence 主题样式： Kadence 主题可能应用其自己的样式，这可能会干扰您的样式。尝试检查浏览器中的元素，看看是否对卡片应用了可能影响间距的其他样式。
使用特定的类名： 有时，.container 或 .card 等通用类名可能会与 WordPress 主题中其他位置定义的样式发生冲突。考虑使用更具体的类名来避免此类冲突。
确保您的 CSS 已加载： 检查 index.css 文件是否已正确加载到 WordPress 中。有时，本地环境和 WordPress 之间的文件路径可能不同。
适应旧版浏览器： 如果您的目标是较旧的浏览器，请记住间隙属性可能不受支持。使用边距是一种更兼容的方法。
检查脚本和样式的加载顺序： 确保您的 CSS 和 JavaScript 文件以正确的顺序加载。有时，不正确的加载顺序可能会导致渲染问题。
最后，清除浏览器的缓存或在不同的浏览器上进行测试总是有帮助的，以确保问题与浏览器缓存无关