Início / coding / Perguntas / 78274378
Accepted
thothal
Asked: 2024-04-04 21:59:28 +0800 CST

Linha como div dentro de um ambiente flexível com um título girado no início

  • 772

Meta

Eventualmente, quero obter algo assim (esqueça a borda branca em torno disso devido ao recorte):

Linha com título girado

Restrições

Esses elementos devem estar dentro da seguinte marcação, que não posso alterar facilmente:

<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>

O que eu tentei

<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;
}

Resultado

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

Captura de tela do codepen

Problemas

  • O div do título deve ocupar apenas o espaço necessário (está muito amplo no momento)
  • O título deve ser centralizado vertical e horizontalmente
  • O conteúdo deve ser centralizado verticalmente
html

5 respostas

  1. Se você alterar seu css para:

    .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;
}

    Basicamente: adicione exibição flexível aos elementos com align-items: center, para que você possa centralizar os elementos no div verticalmente.

    • 1
  2. Best Answer

    Solução:

    • Você pode usar a writing-modepropriedade css para exibir o texto verticalmente e, em seguida, girá-lo 180 graus para virá-lo. Em seguida, defina margincomo 0px(porque <h3>as tags já possuem uma margem).
    • Adicione um display: flex, align-items: centerà split-headingclasse para centralizá-la.
    • Adicione um display: flex, align-items: centerà split-contentclasse para centralizá-la.

    .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. Você fez muito bem !

    e se você adicionar este código em suas aulas, está feito:

    .split-content { align-items: center }

    e isto :

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

  4. Usando 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. Você só precisa fornecer .split-heading& .split-contente display: flex;usar align-items: center;para centralizar verticalmente seu conteúdo. Você pode usar justify-content: center;para centralizar horizontalmente o h3interior .split-headinge removertransform-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

relate perguntas