html - 在容器内保持垂直文本
问题描述
我目前正在尝试创建一些包含玩家详细信息的卡片。玩家的名字与我放置的卡片垂直显示absolutely
。问题是随着名称变长,名称会向下扩展,而不是从下到上齐平。我已经尝试了几个解决方案,但我无法让它工作。这甚至可能吗?还是transform
这里的值只会引起问题?
我想要实现的是:
.potw-section{
background-color: #111;
}
.container{
width: 100%;
max-width: 1260px;
margin: 0 auto;
padding: 0 1.875rem;
box-sizing: border-box;
}
.potw-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0px 90px;
}
.potw-card{
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.potw-meta{
position: absolute;
left: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 1.563rem;
line-height: 29px;
text-transform: uppercase;
font-weight: 700;
width: 95px;
background: linear-gradient(90deg, rgba(17, 17, 17, 0.7) 62.11%, rgba(17, 17, 17, 0.5) 62.11%, rgba(0, 0, 0, 0) 122.11%);
}
.potw-meta-inner{
display: flex;
flex-direction: column;
padding: 1.25rem 0;
}
.potw-value{
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.563rem;
line-height: 29px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1.25rem;
}
.potw-value img{
max-height: 30px;
}
.potw-outline{
position: absolute;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
font-size: 2.188rem;
line-height: 39px;
text-transform: uppercase;
font-weight: 700;
left: -46%;
bottom: 27%;
letter-spacing: 2px;
transform: rotate(270deg);
}
<div class="potw-section">
<div class="container">
<div class="potw-grid">
<div class="potw-card">
<p class="potw-outline">Malte Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
<div class="potw-card">
<p class="potw-outline">Malte Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
<div class="potw-card">
<p class="potw-outline">Longer Name Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
</div>
</div>
</div>
解决方案
transform-origin
用于的选项之一potw-outline
.potw-section{
background-color: #111;
}
.container{
width: 100%;
max-width: 1260px;
margin: 0 auto;
padding: 0 1.875rem;
box-sizing: border-box;
}
.potw-grid{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 0px 90px;
}
.potw-card{
display: flex;
position: relative;
width: 100%;
align-items: center;
}
.potw-meta{
position: absolute;
left: 0;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 1.563rem;
line-height: 29px;
text-transform: uppercase;
font-weight: 700;
width: 95px;
background: linear-gradient(90deg, rgba(17, 17, 17, 0.7) 62.11%, rgba(17, 17, 17, 0.5) 62.11%, rgba(0, 0, 0, 0) 122.11%);
}
.potw-meta-inner{
display: flex;
flex-direction: column;
padding: 1.25rem 0;
}
.potw-value{
display: flex;
flex-direction: column;
align-items: center;
font-size: 1.563rem;
line-height: 29px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 1.25rem;
}
.potw-value img{
max-height: 30px;
}
.potw-outline{
position: absolute;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
font-size: 2.188rem;
line-height: 39px;
text-transform: uppercase;
font-weight: 700;
bottom:0;
left:10%;
letter-spacing: 2px;
transform: rotate(270deg);
transform-origin:0 100%;
}
<div class="potw-section">
<div class="container">
<div class="potw-grid">
<div class="potw-card">
<p class="potw-outline">Malte Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
<div class="potw-card">
<p class="potw-outline">Malte Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
<div class="potw-card">
<p class="potw-outline">Longer Name Delow</p>
<div class="potw-meta">
<div class="potw-meta-inner">
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<span>PPG</span>
<span>28</span>
</div>
<div class="potw-value">
<img src="https://i.ibb.co/KWgnKvh/lakers.png" >
</div>
</div>
</div>
<img src="https://i.ibb.co/NFxXnZm/potw-player.png">
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 在 VueJs 中冗余导航到当前位置
- ios - 确定 UIContextMenuInteraction 何时被解除
- python - 按顺序编写 сsv outout
- flutter - 我在执行下面的代码时报告了以下错误
- scala - 如何在应用层配置 Flink 作业的参数?
- anylogic - 时间图不更新
- permissions - 需要帮助以在 google drive api 中实现查询权限
- react-native - React-native 为什么菜单不呈现
- python-3.x - 我将 type () 函数的结果存储在变量中,打印变量时出现错误
- redhat - 带有外部 DNS 的 FreeIPA - dnssec 支持