Question

我已经在我制作的样本组合页面中制作了一个css网格布局，当我用html / css做的时候它工作得很好而且响应很快：代码在这里： https://codepen.io/abhinavthinktank/full/YevQNq/

没有响应的那个在这里托管： https://abhinav-m.github.io/

相同的反应组件在这里：https://github.com/abhinav-m/personal-portfolio/tree/master/src/components

我使用react，sass和node做了同样的事情，但是这个没有响应，确切地说year类div没有调整大小。这是网格布局css：

techStack

和.gridContainer { display: grid; grid-template-rows: 15px 10% 20% 10% 20% 20% 20% 25px; grid-template-columns: 10% 80% 10%; grid-row-gap: 25px; justify-items: center; } css：

div class='techStack'

这两者的CSS看起来都是一样的！我不明白为什么其中一个不起作用。

链接JSFIDDLE：https://jsfiddle.net/69z2wepo/121098/（没有回复）

Answer 1

我看了一下，但我无法弄清楚差异的原因是什么。我猜测它是页面上其他地方的一种风格，或者因为元素的结构略有不同。

但是，如果您将图标的样式设置为display: inline-block，那么它可以解决您的问题。

Answer 2

您的图片图标（.dev-icon-* colored）是内联级::before伪元素的列表，每个元素都包含在内联级i元素中，这些元素都包含在内部块级div元素。

图标由第三方服务（devicon）提供。

无论出于何种原因，这些伪元素 as devicon icons 都不会包装。

但是，如果您使用纯文本（例如content: "\e845"）切换devicon代码（例如content: "text text text text"），则伪元素会换行。

或者，如果您将div容器从display: block（默认值）切换为display: flex，那么该设备也会被包裹。

所以问题似乎归结为一个块容器中的devicons。

这是一个简单的整体解决方案：

div.icons {
    display: flex;
    flex-wrap: wrap;
}

css-grid div在反应组件中使用时不调整大小

2 个答案: