如何实现compFamilyHierarchyName与蓝色盒子垂直并列且盒子纵向排列？

我猜你想要的效果是：蓝色盒子保持单独一行的上下堆叠状态，同时让“General Tax Knowledge”文本竖排显示在蓝色盒子的旁边（比如右侧），对吧？给compFamilyHierarchyName加display:flex其实是让这个元素内部的子元素用flex布局，不是让文本本身竖排，反而会把它和蓝色盒子挤到同一行，这就偏离你的需求啦。

试试这两个方案：

方案1：用writing-mode实现文本竖排，配合绝对定位 #

如果你的DOM结构是这样的：

<div class="box-wrapper">
  <div class="blue-box">蓝色盒子内容</div>
  <div class="compFamilyHierarchyName">General Tax Knowledge</div>
</div>

可以给父容器设置相对定位，然后把竖排的文本绝对定位到蓝色盒子旁边：

.box-wrapper {
  position: relative; /* 给绝对定位的文本做参考 */
  margin-bottom: 20px; /* 保持上下堆叠的间距 */
}

.blue-box {
  /* 蓝色盒子的原有样式，比如宽度、背景色等 */
  width: 200px;
  height: 100px;
  background-color: #4285f4;
}

.compFamilyHierarchyName {
  /* 实现文本竖排 */
  writing-mode: vertical-rl; /* 从右到左竖排，可选vertical-lr从左到右 */
  text-orientation: upright; /* 让字母保持正立，不需要的话可以去掉 */
  /* 定位到蓝色盒子右侧 */
  position: absolute;
  top: 0;
  right: -80px; /* 根据文本长度调整间距 */
  height: 100%; /* 和蓝色盒子高度保持一致，垂直对齐 */
}

这样蓝色盒子会保持原来的上下堆叠布局，文本则竖排在它的旁边，不会影响整体的堆叠结构。

方案2：调整DOM结构，用flex布局实现局部排列 #

如果允许调整DOM结构，可以把蓝色盒子和文本放在一个小容器里，让这个小容器内部用flex布局，而外部容器保持上下堆叠：

<div class="outer-container">
  <!-- 每个蓝色盒子+文本的组合 -->
  <div class="item-group">
    <div class="blue-box">蓝色盒子内容</div>
    <div class="compFamilyHierarchyName">General Tax Knowledge</div>
  </div>
  <!-- 下一个堆叠的内容 -->
  <div class="item-group">
    <div class="blue-box">另一个蓝色盒子</div>
    <div class="compFamilyHierarchyName">Another Tax Topic</div>
  </div>
</div>

然后设置CSS：

.outer-container {
  /* 外部容器保持块级，默认就是上下堆叠 */
}

.item-group {
  display: flex;
  align-items: center; /* 让蓝色盒子和竖排文本垂直居中对齐 */
  margin-bottom: 20px;
}

.blue-box {
  width: 200px;
  height: 100px;
  background-color: #4285f4;
}

.compFamilyHierarchyName {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-left: 10px; /* 蓝色盒子和文本的间距 */
}

这样每个item-group内部是蓝色盒子+竖排文本的横向排列，而整体在外部容器里还是上下堆叠的状态，完美符合你的需求~

如果你的DOM结构和我假设的不一样，可以补充一下结构代码，我再帮你调整细节！

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