问题标签 [pure-css]

我有一个 2 列网格，如下所示：一些文本，然后是与该文本相关的图像。在另一行，顺序颠倒：

我创建了一个标准网格来实现它（jsfiddle：https ://jsfiddle.net/6yxLpqmr/ ），从源代码中提取：

但是，一旦网格在窄屏幕上折叠，就会导致：

这是不直观的。

Q1：如何将结果更改为：

Q2：是否有可能以一种自行创建交替的方式编写 CSS（当然不生成 CSS），同时在语义上保持 HTML“有序”（图像/文本/图像/文本/...）？

我正在关注100 天的 CSS 挑战赛。第62天卡住了。尝试用纯 css 实现进度条。

当悬停在卡片上时，我希望进度条具有更大的宽度。

悬停下方不起作用，我不知道为什么。有关如何调试此类 css 问题的任何提示也会有所帮助。

使用 JS 会更容易，但我想要纯 CSS 解决方案。谢谢........

我需要animation-delay为 20 个 div 应用不同的值。我在下面的 CSS 可以工作，但我想知道是否有更有效/更短的方式在Pure CSS中编写它。每个animation-delaydiv 需要递减 0.5s。

我是一个初学者，我只是想知道我是否可以使用 SVG 图标作为按钮，比如让它们悬停并激活？如果有一种方法可以为它们制作边框，但围绕形状而不是形状的盒子并用颜色填充形状？只使用纯 CSS

代码笔：链接

当<select>isrequired时，它工作正常。

但问题是，当我删除时"required"，它是 Label Floating 没有选择的选项。

在这种情况下如何维护浮动标签？
我错过了什么？还是我们需要 JavaScript？

所以这个想法不是在标签为空时浮动标签。

我input使用链接解决了这个问题

我目前正在与：

仅从代码中，您可能会看到我要完成的工作，但我会澄清一下：

1. 在任何设备宽度下，表格都应为 100% 宽
2. 在任何设备宽度下，表格单元格都应均匀拉伸以填充
3. 在内容不适合的设备宽度处，表格应该 overflow-x:auto 以便（例如）垂直移动用户可以滚动表格

我一直在搞乱 table display:block 看起来不错并且可以在低宽度设备上工作，但是它在第 2 点上失败了

关闭显示：块我可以让它在桌面上很好地工作，但是当调整大小时它会失败 #3

我不能为此使用媒体查询，因为表格宽度是随机的（可能仍需要在桌面上滚动，或者可能只是 2 个小列）+ 媒体查询真的很糟糕

谁能告诉我我做错了什么/指出我正确的方向？非常感谢！