html - 将 p 标签对齐到 div 的长度
问题描述
我正在尝试将 ap 标签中的文本与 div 的高度对齐。
我怎么能在css中做到这一点?
这是html:
所以预期的结果是文本应该和父 div 的高度一样长。
body{
height:100vh;
}
.about-2 {
display: grid;
grid-template-columns: 5% 90%;
column-gap: 5%;
height: 100%;
position: relative;
}
.about-2 .skills-text p {
transform: rotate(270deg);
transform-origin: 0 0;
position: absolute;
bottom: 0;
left: 0;
font-size: 1.5em;
color: #face6f;
padding-left: 35px;
}
<div class="about-2">
<div class="skills-text">
<p class="dash">My skills</p>
</div>
<div class="skillset">
<div>skill 1</div>
<div>skill 1</div>
<div>skill 1</div>
<div>skill 1</div>
</div>
</div>
解决方案
我猜或多或少是这样的:
body {
background: #0c0c0c;
color: #eee;
padding: 24px;
}
.about {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 24px;
}
.title {
display: flex;
align-items: center;
margin: 0;
font-size: 1.4em;
color: #face6f;
text-align: end;
writing-mode: vertical-lr;
transform: scale(-1);
}
.title::before {
display: block;
content: '';
flex: 1 1 auto;
width: 2px;
margin-bottom: 6px;
background-color: #face6f;
}
.skillset, .skillset-item {
list-style: none;
margin: 0;
padding: 0;
}
.skillset {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
}
.skillset-item { padding-top: 12px; }
.skillset-item::after {
display: block;
content: '';
width: 100%;
height: 3px;
background-color: #face6f;
margin-top: 12px;
}
<div class="about">
<h3 class="title">My skills</h3>
<ul class="skillset">
<li class="skillset-item">skill 1</li>
<li class="skillset-item">skill 2</li>
<li class="skillset-item">skill 3</li>
<li class="skillset-item">skill 4</li>
</ul>
</div>
推荐阅读
- javascript - 有没有办法在定义之前调用 html 元素?
- variables - 全局变量只被调用一次然后就失去了作用域
- spring - Spring Security:无法重新登录
- apache-spark - 当我使用 C:\hadoop\bin\winutils.exe 运行 chmod 时,它显示“应用程序无法正确启动”
- python - Tensorflow 通用句子编码器中的 OpError
- python - Tensorflow dataset.map lambda自定义函数不适用于每张图像,仅适用于整个数据集
- reactjs - 如何在 React js web APP 中添加编辑器并将数据存储在 mongodb 中
- python - 我无法使用 pyinstaller 创建独立的 exe 文件,主脚本包含 Qprocess
- javascript - 如何将查询语法解析为具有分组和优先级的数据库查询?
- kubernetes - Pod 在创建时会消耗其请求或限制中指定的全部资源吗?