随内容增长的 CSS 选项卡

Question

我的 CSS 标签有点问题。问题是，内容区域不会根据其中的内容增长。这是 CSS 代码:

.tabs {
  position: relative;   
  min-height: 400px; 
  clear: both;
  margin: 25px 0;
}



.tab1 {
  float: left;
}
.tab2 {
  float: left;
}
.tab3 {
  float: left;
}


.tab1 label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-right:2px;
  position: relative;
  left: 1px; 
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;

}

.tab2 label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-right:2px;
  position: relative;
  left: 1px; 
   border-top-right-radius: 15px;
   border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;
}

.tab3 label {
  background: white; 
  padding: 10px; 
  border: 1px solid #ccc;  
  margin-right:2px;
  position: relative;
  left: 1px; 
   border-top-right-radius: 15px;
   border-top-left-radius: 15px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-topleft: 15px;
}




.tab1 [type=radio] {
  display: none;  
}
.tab2 [type=radio] {
  display: none;   
}
.tab3 [type=radio] {
  display: none;   
}



  .content1 {
  position: absolute;
  top: 28px;
  left: 0;
  background: #936;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}

  .content2 {
  position: absolute;
  top: 28px;
  left: 0;
  background: #09C;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}

  .content3 {
  position: absolute;
  top: 28px;
  left: 0;
  background: #990;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
}



   .tab1 [type=radio] ~ label:hover
{
background: #936;
text-shadow:1px 1px 1px #000;
}
   .tab2 [type=radio] ~ label:hover
{
background: #09C;
text-shadow:1px 1px 1px #000;
}
   .tab3 [type=radio] ~ label:hover
{
background: #990;
text-shadow:1px 1px 1px #000;
}




.tab1 [type=radio]:checked ~ label
{
    background: #936;
  border-bottom: 1px solid white;
  z-index: 2;
}

.tab2 [type=radio]:checked ~ label
{
    background: #09C;
  border-bottom: 1px solid white;
  z-index: 2;
}

.tab3 [type=radio]:checked ~ label
{
    background: #990;
  border-bottom: 1px solid white;
  z-index: 2;
}





[type=radio]:checked ~ label ~ .content1 {
  z-index: 1;

}
 [type=radio]:checked ~ label ~ .content2 {
  z-index: 1;

}
 [type=radio]:checked ~ label ~ .content3 {
  z-index: 1;

}

(抱歉太长了)然后是 HTML:

<div id="page-wrap">
<div class="tabs">
  <div class="tab1">
    <input type="radio" id="tab-1" name="tab-group-1" checked="checked" />
    <label for="tab-1">One</label>

    <div class="content1">
      <p>Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here.</p>
    </div>
  </div>

  <div class="tab2">
    <input type="radio" id="tab-2" name="tab-group-1" /> <label for="tab-2">Two</label>

    <div class="content2">
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here. Some content here.
      Some content here. Some content here. Some content here.<br />
    </div>
  </div>

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

    <div class="content3">
      <p>Stuff for Tab Three</p>
    </div>
  </div>
</div>

我在 .content 中尝试了 overflow: both; 但这给了我滚动条，我希望内容区域本身增长。我什至尝试调用 .clear {clear: both;} 但这似乎也不太奏效。

感谢任何帮助。

谢谢:)

Answer 1

  .content1 {
    position:absolute;
  top: 28px;
  left: 0;
  background: #936;
  padding: 20px;
  border: 1px solid #ccc; 
    clear:both;
}

  .content2 {
   position:absolute;
  top: 28px;
  left: 0;
  background: #09C;
  padding: 20px;
  border: 1px solid #ccc; 
    clear:both;
}
  .content3 {
  position:absolute;
  top: 28px;
  left: 0;
  background: #990;
  padding: 20px;
  border: 1px solid #ccc; 
    clear:both;
}

http://jsfiddle.net/UDDkU/1/

它仍然需要一些工作来显示和隐藏正确的选项卡，但您的溢出问题已解决。如果您希望所有选项卡具有相同的宽度，则需要添加一个。

更新

这是一个更新版本，包含精简的 CSS 和完整的选项卡。

http://jsfiddle.net/UDDkU/20/