내용에 따라 CSS 탭이 증가합니다.

Question

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 일 : 다음은 CSS 코드의 내가 .content 내부 overflow: both;을 시도하지만 나에게 스크롤바를 준

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

, 나는 콘텐츠를 원하는 지역 자체가 성장할 것입니다. 나는 심지어 .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/