css - 移动端自适应正方形里面有排两排的文字怎么保证样式不会变

问题描述

问 题

如果文字只有一排样式是不会变的 如果加一排就会变形

.game-model{

        display: inline-block;
width: 30%;
background:white;
font-size: 16px;
font-weight: bold;
position: relative;
vertical-align: middle;
margin-left: 2%;
    }
    .game-model:before {
content: "";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;

}
<div class="game-model-group">

<div class="game-model">
    个人场   
</div>
<div class="game-model">
    5V5组队
</div>
<div class="game-model">
    5V5组队
</div>

</div>
自适应正方形的代码 请问这个问题怎么解决

解决方案

1.容器高度，宽度固定,第一行，和第二行文字分别用p标签包括
2.display:flex;//弹性布局

3.flex-direction:column;
justify-content:space-around;

这篇关于css - 移动端自适应正方形里面有排两排的文字怎么保证样式不会变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！