html - 使用单选标签显示标签上方的内容 - 仅限 CSS？

Question

我试图在单击时在选项卡标签上方显示内容。有没有简单的方法可以做到这一点？也许只使用 CSS？将内容 div 放在标签上方时，分页符...任何想法将不胜感激。

提前致谢!

DEMO LINK

CSS

    .tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

HTML

<div class="tabs">

   <div class="tab">
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Tab One</label>
       <div class="content">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dapibus varius urna, ac venenatis arcu convallis consequat. In augue est, posuere auctor facilisis varius, dictum ac risus. Donec nibh justo, aliquam sed tempus quis, lobortis sed orci.
       </div> 
   </div>

   <div class="tab">
       <input type="radio" id="tab-2" name="tab-group-1">
       <label for="tab-2">Tab Two</label>
       <div class="content">
           Vivamus id elementum risus. In sit amet mi nulla, ac sollicitudin odio. Phasellus laoreet leo vitae velit lobortis at condimentum odio placerat. Nam sapien eros, accumsan id porttitor a, commodo ut urna. Cras dignissim metus quis enim placerat lobortis.
       </div> 
   </div>

    <div class="tab">
       <input type="radio" id="tab-3" name="tab-group-1">
       <label for="tab-3">Tab Three</label>

       <div class="content">
           Phasellus scelerisque luctus ligula, a consequat orci posuere rutrum. Sed ipsum nisi, ullamcorper eget fermentum a, dignissim sed dolor. Mauris viverra pretium ante, eu mollis nisi volutpat quis. Nunc neque erat, pharetra in feugiat eget, faucibus id sem. 
       </div> 
   </div>

</div>

Answer 1

如果您的完整设计允许，您可以为内容区域分配固定的高度和最小宽度。然后，您将能够通过向标签的 bottom 属性添加负值来定位标签。

.tab label {
    background: #eee;
    left: 1px;
    margin-left: -1px;
    padding: 10px;
    position: relative;
    /*--- Updated value ---*/
    bottom: -149px;
}
...
.content {
    background: white;
    left: 0;
   /*--- Updated values ---*/
    bottom: 0;
    height: 100px;
    min-width: 350px;
   /*----*/
    padding: 20px;
    position: absolute;
    right: 0;
    top: 0;
}

在这里查看:http://jsbin.com/quceviha/1/