Html 将文本置于图像下的更好方法？

我很难弄明白这一点。当我第一次尝试使文本保持在图片下方时，它一直被

float

ed向左移动。这个代码似乎有效，但我认为我做错了什么，因为当你将

.resmontage ul

宽度从

70%

更改为

60%

时，所有图片都变小了。它们不会停留在我最初指定的

宽度

或

高度

为什么我需要将
.resmontage img
设置为
宽度：100%
才能使用
.resmontage li
？如果我从
resmontage li
中删除宽度，一切都会搞砸！我知道你可以使用bootstrap，但我更喜欢自己做


#bt{
颜色：白色；
利润率最高：1%；
左边缘：-8%；
}
雷斯蒙塔奇先生{
浮动：左；
背景色：黑色；
宽度：70%；
身高：25%；
左：7%；
利润率最高：1%；
边界半径：1%；
}
李先生{
列表样式类型：无；
宽度：20%；
利润率最高：1%；
浮动：左；
右：3%；
}
.resmontage img{
宽度：100%；
身高：65%；
}
.你好{
文本对齐：居中；
颜色：白色；
利润率最高：2%；
}
.clearfix:之后{
内容：“；
显示：两者皆有；
明确：两者皆有；
}


将于下月发布的游戏。

Gta v


CSGO


火箭联盟


巫师3


您已经通过将图像放置在各种
li
中来设置图像的
宽度。当您指定他们的
宽度为100%
时，您只是告诉他们拿起他们的容器，即
li
，它的
宽度为
20%


#bt{
颜色：白色；
利润率最高：1%；
左边缘：-8%；
}
雷斯蒙塔奇先生{
浮动：左；
背景色：黑色；
宽度：70%；
身高：25%；
左：7%；
利润率最高：1%；
边界半径：1%；
}
李先生{
列表样式类型：无；
宽度：20%；
利润率最高：1%；
浮动：左；
右：3%；
}
.resmontage img{
宽度：100%；
高度：自动；
}
.你好{
文本对齐：居中；
颜色：白色；
利润率最高：2%；
}
将于下月发布的游戏。

Gta v


CSGO


火箭联盟


巫师3


首先，CSS不是一种编程语言。@Zippiex没关系。我做了一些
margin
al的改进，但看起来不错