带有纯css的4列页脚

我有一个4列的页脚，使用

float:left。我想使用CSS网格显示4列，而不使用
float:left。我尝试了
网格模板列：1fr 1fr 1fr 1fr带<代码>浮动：左和它的工作，但当我删除
浮动：左，它会断开

这是带有
float:left的图像

当我移除
浮动时：左，这就是它的外观


.footer{
高度：自动；
背景色：#006400；
宽度：100%；
填充顶部：20px；
对齐项目：居中；
证明内容：周围的空间；
颜色：#ffffff；
字号：100；
}
.版权所有{
颜色：#fff！重要；
文本对齐：居中；
字体大小：11px；
填充顶部：15px；
}
.footer支持文本所有者{
字体大小：10px；
填充顶部：15px；
边缘顶部：20px；
颜色：#fff；
}
.footer容器{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
填充顶部：15px；
边缘顶部：15px；
}
.栏目{
网格模板柱：1fr 1fr 1fr 1fr；
浮动：左；
宽度：25%；
填充：10px；
高度：300px；
}
.第2栏，
.第3栏，
.第4栏{
宽度：25%；
边缘顶部：10px；
填充顶部：10px；
}
@介质（最小宽度：768px）{
.footer容器{
宽度：750px；
}
}
@介质（最小宽度：992px）{
.footer容器{
宽度：970px；
}
}
@介质（最小宽度：1200px）{
.footer容器{
宽度：1170px；
}
}
.页脚页眉{
颜色：#ffffff；
字号：100；
}
.小页脚页眉{
字体大小：12px；
颜色：#fff；
字号：100；
}
.footer支持文本{
颜色：#EFF5EF；
字体大小：14px；
边缘顶部：8px；
填充顶部：8px；
}
.页脚链接{
颜色：#fff；
文字装饰：无；
}
.fcc页脚标志{
宽度：40px；
垂直对齐：中间对齐；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}

马尼拉自由酒店
我们不隶属于freeCodeCamp.org，是一个独立的本地社区和研究小组
freeCodeCamp徽标归freeCodeCamp.org所有
&复制2019年freeCodeCamp马尼拉
免费编码放大器






与我们联系






其他freeCodeCamp社区



移动
网格模板列：
到
页脚容器
将
display:grid
添加到
页脚容器中


.footer容器{
背景色：绿色；/*可选*/
显示：网格；
网格间距：1rem；/*可选*/
网格模板柱：1fr 1fr 1fr 1fr；
填充：1rem；/*可选*/
}
.栏目{
背景色：黄色；/*可选*/
填充：1rem；/*可选*/
}

1.
2.
3.
4.

移动
网格模板列：
到
页脚容器
将
display:grid
添加到
页脚容器中


.footer容器{
背景色：绿色；/*可选*/
显示：网格；
网格间距：1rem；/*可选*/
网格模板柱：1fr 1fr 1fr 1fr；
填充：1rem；/*可选*/
}
.栏目{
背景色：黄色；/*可选*/
填充：1rem；/*可选*/
}

1.
2.
3.
4.
嘿，这行得通，但为什么文本很难看？您好，我认为您应该逐个评估与字体或文本相关的CSS选择器。他把它修好了。非常感谢。我很乐意帮你嘿，这行得通，但是为什么文字很难看呢？您好，我认为您应该逐个评估与字体或文本相关的CSS选择器。他把它修好了。非常感谢。我很乐意帮忙