主页 / coding / 问题 / 78274378
Accepted
thothal
Asked: 2024-04-04 21:59:28 +0800 CST

在 Flex 环境中像 div 一样行，开头有旋转标题

  • 772

目标

最终我想要得到这样的东西（忘记周围的白色边框是由于剪切造成的）：

具有旋转标题的行

约束条件

这些元素必须位于以下标记内，我无法轻易更改：

<div style="position:absolute;top:15px;right:15px;bottom:15px;left:15px">
  <div style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;">
     <div style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
        <div style="position:absolute;top:0;left:0;right:0;bottom:0;">
          <!-- place elements here -->
        </div>
     </div>
  </div>
</div>

我尝试过的

<div class="split-container">
  <div class="split-heading">
    <h3>Heading</h3>
  </div>
  <div class="split-content">
    <p>Content</p>
  </div>
</div>

.split-container {
  display: flex;
  height: 100%;
}

.split-heading {
  background-color: rgb(198,89,17);
  color: #fff;
  padding: 0 5px; /* Add padding to the sides */
}

.split-heading > h3 {
  transform: rotate(-90deg);
  transform-origin: bottom right;
}

.split-content {
  flex-grow: 100;
  background-color: rgb(244,176,132);
  color: #fff;
}

结果

https://codepen.io/thothal/pen/qBwxEKO

截图来自codepen

问题

  • 标题 div 应该只占据所需的空间（现在太宽了）
  • 标题应垂直和水平居中
  • 内容应垂直居中
html

5 个回答

  1. 如果你将 css 更改为：

    .split-heading {
  background-color: rgb(198, 89, 17);
  color: #fff;
  padding: 0 5px; /* Add padding to the sides */
  display: flex;
  align-items: center;
}
.split-heading > h3 {
  writing-mode: sideways-lr;
  text-align: center;
}

.split-content {
  flex-grow: 100;
  background-color: rgb(244, 176, 132);
  color: #fff;
  display: flex;
  align-items: center;
}

    基本上：使用align-items: center向元素添加flex显示，这样你就可以将div中的元素垂直居中。

    • 1
  2. Best Answer

    解决方案：

    • 您可以使用 csswriting-mode属性垂直显示文本，然后将其旋转 180 度以翻转它。然后设置margin为0px（因为<h3>标签已经有边距）。
    • 在类中添加display: flex,使其居中。align-items: centersplit-heading
    • 在类中添加display: flex,使其居中。align-items: centersplit-content

    .split-container {
  display: flex;
}

.split-heading {
  background-color: rgb(198,89,17);
  color: #fff;
  padding: 0 5px; /* Add padding to the sides */
  display: flex;
  align-items: center;
}

.split-heading > h3 {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
  margin: 0px;
}

.split-content {
  flex-grow: 100;
  background-color: rgb(244,176,132);
  color: #fff;
  display: flex;
  align-items: center;
}
    <div style="position:absolute;top:15px;right:15px;bottom:15px;left:15px">
  <div style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;">
     <div style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
        <div style="position:absolute;top:0;left:0;right:0;bottom:0;">
          <div class="split-container">
            <div class="split-heading">
              <h3>Heading</h3>
            </div>
            <div class="split-content">
              <p>Content</p>
            </div>
          </div>
        </div>
     </div>
  </div>
</div>

    • 1

  3. 你做得很好！

    如果您在类中添加此代码，则完成：

    .split-content { align-items: center }

    和这个 ：

    .split-header { justify-content: center; align-items: center }
    • 1

  4. 使用writing-mode: tb-rl->

    .split-container {
  display: flex;
}

.split-heading {
  transform: rotate(180deg);
  background-color: rgb(198,89,17);
  color: #fff;
  padding: 0 5px; /* Add padding to the sides */
  display: flex;
  align-items: center;
}

.split-heading > h3 {
  writing-mode: tb-rl;
  margin: 15px;
}

.split-content {
  flex-grow: 100;
  background-color: rgb(244,176,132);
  color: #fff;
  display: flex;
  align-items: center;
}
.split-content p {
margin-left: 10px;
}
    <div style="position:absolute;top:15px;right:15px;bottom:15px;left:15px">
  <div style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;">
     <div style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
        <div style="position:absolute;top:0;left:0;right:0;bottom:0;">
          <div class="split-container">
            <div class="split-heading">
              <h3>Heading</h3>
            </div>
            <div class="split-content">
              <p>Content</p>
            </div>
          </div>
        </div>
     </div>
  </div>
</div>

    • 1

  5. 您只需要给出.split-heading& .split-content，display: flex;然后使用align-items: center;它们的内容垂直居中。您可以使用justify-content: center;水平居中h3并.split-heading删除transform-origin: bottom right;

    .split-container {
  display: flex;
  height: 100%;
}

.split-heading {
  background-color: rgb(198, 89, 17);
  color: #fff;
  padding: 0 5px;

  width: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.split-heading > h3 {
  transform: rotate(-90deg);
}

.split-content {
  flex-grow: 100;
  background-color: rgb(244, 176, 132);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 1em;
}
    <div style="position:absolute;top:15px;right:15px;bottom:15px;left:15px">
  <div style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;height:100%;">
    <div style="position:relative;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;height:100%;">
      <div style="position:absolute;top:0;left:0;right:0;bottom:0;">

        <div class="split-container">
          <div class="split-heading">
            <h3>Heading</h3>
          </div>
          <div class="split-content">
            <p>Content</p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

    • 1

相关问题