HTML/CSS垂直文本布局问题：右侧内容顶部对齐方案咨询

你的问题出在行内元素的默认垂直对齐规则：span是行内元素，默认以基线对齐；加上writing-mode: vertical-rl后，左侧竖排文本的基线位置移到了底部，导致右侧内容跟着对齐到底部。下面给你几种简单的解决办法：

方法1：用Flex布局（推荐） #

给父div添加flex属性，默认情况下子元素会沿主轴排列，且垂直方向对齐顶部，代码修改如下：

/* 新增父容器样式 */
.container {
  display: flex;
  align-items: flex-start; /* 显式指定顶部对齐，默认也是这个值，可省略 */
}

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}

<div class="container">
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

方法2：修改行内元素的垂直对齐属性 #

直接给左侧竖排的span设置vertical-align: top，强制它和右侧内容以顶部对齐：

.myName {
    font-size: 400%;
    font-family: gadugi;
    padding-left: 5%;
    color: #455750;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
    vertical-align: top; /* 新增这行 */
}

<div>
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

方法3：用Grid布局 #

如果需要更灵活的布局控制，可以用Grid：

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 5%; /* 替代padding-left，更灵活 */
}

.myName {
    font-size: 400%;
    font-family: gadugi;
    color: #455750;
}

.sideLine {
    color: #80928B;
    font-size: 220%;
    font-family: candara;
    writing-mode: vertical-rl;
    padding-top: 2%;
}

<div class="container">
    <span class="sideLine">My occupation</span>
    <span class="myName">My name</span>
</div>

内容的提问来源于stack exchange，提问作者Dragynjump