Html 将每张卡向左浮动-卡的水平线

身体{ 字体系列：Arial、Helvetica、无衬线字体； } .翻盖卡片{ 背景色：透明； 宽度：300px； 高度：300px； 透视图：1000px； } .翻转卡内部{ 位置：相对位置； 宽度：100%； 身高：100%； 文本对齐：居中； 转变：转变0.6s； 变换样式：保留-3d； 盒影：0 4px 8px 0 rgba0,0,0,0.2； } .翻转卡：悬停。翻转卡内部{ 变换：旋转180度； } .正面翻转卡片，.背面翻转卡片{ 位置：绝对位置； 宽度：100%； 身高：100%； 背面可见性：隐藏； } .翻转卡正面{ 背景色：bbb； 颜色：黑色； z指数：2； } .把卡片翻回去{ 背景色：2980b9； 颜色：白色； 变换：旋转180度； z指数：1； } .对{ 浮动：对； 排名：0； 右：0； 位置：绝对位置； z指数：2； } 将鼠标悬停在卡片上，了解STI和BBV。 将鼠标悬停在下图上： 淋病 阳性-可以治愈 阴性-某些菌株无法治愈。如果不治疗，可能导致不孕或死亡。 单击以了解更多信息

衣原体 阳性-这很容易用抗生素治疗和治愈。 阴性-如果不治疗可能导致不孕。 单击以了解更多信息

梅毒 肯定-。 否定-。 单击以了解更多信息

艾滋病咨询门诊 肯定-。 否定-。 单击以了解更多信息

您可以使用.flip卡的display:inline块

身体{ 字体系列：Arial、Helvetica、无衬线字体； 宽度：1300px；/*足够容纳4张翻转卡的空间*/ overflow-x:scroll/*可水平滚动*/ } .翻盖卡片{ 背景色：透明； 宽度：300px； 高度：300px； 透视图：1000px； 显示：内联块；/*在水平线上彼此并排显示*/ 边距：10px/*每张卡之间有一点间隙*/ } .翻转卡内部{ 位置：相对位置； 宽度：100%； 身高：100%； 文本对齐：居中； 转变：转变0.6s； 变换样式：保留-3d； 盒影：0 4px 8px 0 rgba0,0,0,0.2； } .翻转卡：悬停。翻转卡内部{ 变换：旋转180度； } .正面翻转卡片，.背面翻转卡片{ 位置：绝对位置； 宽度：100%； 身高：100%； 背面可见性：隐藏； } .翻转卡正面{ 背景色：bbb； 颜色：黑色； z指数：2； } .把卡片翻回去{ 背景色：2980b9； 颜色：白色； 变换：旋转180度； z指数：1； } /*删除不必要的。正确的样式*/ 将鼠标悬停在卡片上，了解STI和BBV。 将鼠标悬停在下图上： 淋病 阳性-可以治愈 阴性-某些菌株无法治愈。如果不治疗，可能导致不孕或死亡。 单击以了解更多信息

---

在链接到一堆可怕的皮肤病照片之前，请提醒人们？对不起，你会看到一些令人不快的照片。我觉得这真的很容易，但我似乎从昨天起就无法解决。你想让那张照片留在右上角还是在水平线上？嗨，杰西比，欢迎来到StackOverflow。请给我们一段html和css代码，以便我们可以尝试确定错误在哪里？谢谢！太棒了，正是我想要的！！