與內容一起增長的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> 

我試圖overflow: both;內.content但給我的滾動條，我想要的內容面積本身增長。我甚至試圖打電話給.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/

它仍然需要一些工作來顯示和隱藏正確的標籤，但你的溢出問題是固定的。如果你想要所有的標籤具有相同的寬度，你需要添加一個。

UPDATE

這裏是一個更新版本冷凝CSS和完成標籤。

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