javascript - 内容与垂直制表符高度对齐 html, css

Question

我需要帮助编写 HTML 代码，使垂直选项卡和点击选项卡旁边显示的内容。

我能够从其他帖子中找到垂直制表符示例代码，但是我找不到如何在没有硬代码的情况下对齐内容高度和阴影框。当我手动提供 margin-top 样式时，我无法使其响应。

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>