html - 更改网格系统中的字体大小
问题描述
我正在使用网格系统显示 7 个小图像,每个图像旁边都有一个数字,应该是这样的。在第一个示例中,我没有使用网格系统,但它要复杂得多,我花了 60 到 120 分钟来完成它,使用网格系统我花了不到 10 分钟,但我无法调整字体大小。看看这里
我尝试覆盖任何可能的字体大小属性,并且我还尝试为 div 提供更多类并更改字体大小。
注意:我可以轻松更改字体系列。
<div class="container" style="float: left; font-family: 'Germania One', cursive;">
<div class="row">
<div class="col">
<img src="forca.png" alt=""> 2
</div>
<div class="col">
<img src="destreza.png" alt=""> 3
</div>
<div class="col">
<img src="agilidade.png" alt=""> 2
</div>
<div class="col">
<img src="inteligencia.png" alt=""> 8
</div>
<div class="col">
<img src="resistencia.png" alt=""> 4
</div>
<div class="col">
<img src="fe.png" alt=""> 2
</div>
<div class="col">
<img src="carisma.png" alt=""> 4
</div>
</div>
</div>
解决方案
<div class="container" style="float: left; font-family: 'Germania One', cursive;">
<div class="row">
<div class="col">
<img src="forca.png" alt="">
<p style="font-size:2em">2</p>
</div>
<div class="col">
<img src="destreza.png" alt="">
<p style="font-size:2em">3</p>
</div>
<div class="col">
<img src="agilidade.png" alt="">
<p style="font-size:2em">2</p>
</div>
<div class="col">
<img src="inteligencia.png" alt="">
<p style="font-size:2em">8</p>
</div>
<div class="col">
<img src="resistencia.png" alt="">
<p style="font-size:2em">4</p>
</div>
<div class="col">
<img src="fe.png" alt="">
<p style="font-size:2em">2</p>
</div>
<div class="col">
<img src="carisma.png" alt="">
<p style="font-size:2em">4</p>
</div>
</div>
</div>
推荐阅读
- bash - 如何忽略/还原文件内容中大小写的变化?
- c# - System.Data.Entity.QueryableExtensions.Include :对象引用未设置为实例
- angular - 替换或更改 Angular 8/9 中现有或旧的组件前缀?
- reactjs - 如何制作可以使用 React.js 捕获图像然后将其上传到 firebase 的相机?
- javascript - 为什么我在使用基于我的代码的反应时收到此错误?
- vue.js - 在 Vue 的选项卡中迭代对象
- reactjs - PrimeReact 下拉菜单有问题
- python - 通过使用matplotlib对pandas(python)中的csv数据的趋势有什么改进?
- stm32 - PGSERR 和 PGPERR 位清零
- sql - 如何解决 SQL Server 中的数据类型不兼容问题