コンテンツは垂直タブの高さhtml、cssに揃えられました

Question

クリックするとタブの横に表示される垂直タブとコンテンツを作成するHTMLコードを書く上で助けが必要です。

私は、しかし、私はハードコードせずに、コンテンツの高さと影付きのボックスを配置する方法を見つけることができませんでした他のポストから垂直タブの例のコードを見つけることができました。私は手作業でマージントップを与えたときに反応しなかった。

Answer 1

これはおそらく多くの方法があります。ここに私の考え

body { 
 
    font-family:sans-serif; 
 
    color:red; 
 
} 
 
.tab { 
 
    position:relative; 
 
} 
 
.tab_title { 
 
    text-align:center; 
 
    line-height:30px; 
 
    width:80px; 
 
    background:orange; 
 
    padding:5px 0; 
 
} 
 
.tab_content { 
 
    background:yellow; 
 
    display:none; 
 
    position:absolute; 
 
    left:80px; 
 
    right:0; 
 
    top:0; 
 
    padding:5px 20px; 
 
} 
 
.tab:hover .tab_content { 
 
    display:block; 
 
} 
 
.tab:hover .tab_title { 
 
    background:yellow; 
 
}

<div id="container"> 
 
    <div class="tab"> 
 
    <div class="tab_title">A</div> 
 
    <div class="tab_content">Content of A<br>long<br>text<br>yeah</div> 
 
    </div> 
 
    <div class="tab"> 
 
    <div class="tab_title">B</div> 
 
    <div class="tab_content">Content of B<br>long<br>text<br>yeah</div> 
 
    </div> 
 
    <div class="tab"> 
 
    <div class="tab_title">C</div> 
 
    <div class="tab_content">Content of C<br>long<br>text<br>yeah</div> 
 
    </div> 
 
</div>