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/

正しいタブを表示および非表示にするにはまだ作業が必要ですが、オーバーフローの問題は修正されています。すべてのタブを同じ幅にしたい場合は、1 つ追加する必要があります。

アップデート

これは、要約された css と完全なタブを備えた更新バージョンです。

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

于 2012-12-07T22:50:29.883 に答える