1

我的 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;}，但这似乎也不太好用。

我很感激任何帮助。

谢谢 ：）

4

1 回答 1

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/

于 2012-12-07T22:50:29.883 回答