CSS选项卡随内容增长

时间:2012-12-07 22:21:37

标签: css html tabs size

我的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>

我在overflow: both;内尝试.content,但这给了我滚动条,我希望内容区域本身增长。我甚至试图打电话给.clear {clear: both;},但这似乎也没有用。

我感谢任何帮助。

谢谢:)

1 个答案:

答案 0 :(得分:2)

  .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/