divの中に縦に並んだ縦のテキスト

Question

私は下のように垂直方向にテキストを含むdivを持っています。私が達成したい何を、以下の画像は示しています

Answer 1

私はあなたのHTML/CSSの構造を確認していない、またはあなたのコードは次のようになりますが、ここで私が書いた例であるかもしれないもの。

* { 
 
    box-sizing: border-box; /* Set the box sizing for easier margins/paddings. */ 
 
} 
 

 
html, 
 
body { 
 
    margin: 0; /* Demo style. */ 
 
    background: #95a5a6; /* Demo style. */ 
 
} 
 

 
.container { 
 
    width: 50%; /* Demo style. */ 
 
    margin: 50px auto; /* Demo style. */ 
 
    background: white; /* Demo style. */ 
 
    font-family: arial; /* Demo style. */ 
 
    font-size: 16px; /* Demo style. */ 
 
} 
 

 
/* The parent of the rotated text. */ 
 
.box { 
 
    position: relative; /* Relative for the absolute childs. */ 
 
    background: #c0392b; /* Demo style. */ 
 
    color: white; /* Demo style. */ 
 
    padding: 10px; /* Demo style. */ 
 
    height: 200px; /* Static height is required. */ 
 
} 
 

 
/* The rotated text */ 
 
.box span { 
 
    width: 200px; /* Must be the same as the height of the .box div. */ 
 
    -webkit-transform-origin: 90px 100px; /* These values will need to be changed depending on your width of this span, and height of it's parent. */ 
 
    display: inline-block; /* Set the display of the span to be in the block flow. */ 
 
    -webkit-transform: rotate(-90deg); /* Rotate the text span. */ 
 
    background: #2980b9; /* Demo style. */ 
 
    text-align: center; /* Center the text. */ 
 
    padding: 10px; /* Demo style. */ 
 
    float: left; /* Make the rotated text be on the left most part of the parent. */ 
 
} 
 

 
/* Other content that can be beside the rotated text */ 
 
.content { 
 
    position: absolute; /* So the content is not affected by the rotated text. */ 
 
    margin: 0 0 0 30px; /* Push the content from the left so it is not behind the rotated text. */ 
 
    top: 0; /* Push the content to the top of the parent. */ 
 
    padding: 0 10px; /* Demo style. */ 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    <span>JS</span> 
 
    <div class="content"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis culpa laborum suscipit, laudantium ut recusandae architecto modi natus incidunt, consequuntur ea quas quod nisi nobis possimus nostrum, porro neque saepe.</p> 
 
    </div> 
 
    </div> 
 
</div>