親DIVを子DIVにラップさせるにはどうすればよいですか？問題はにありposition:absoluteます.nav-content。
編集：まあ、どうやら私が欲しいものは不可能です。これを回避する唯一の方法は、そもそもこれの目的を無効にするjavascriptです。ただし、固定の高さをに設定すると機能しnav-tabsます。
HTML
<div class="nav-tabs-wrapper">
<div class="nav-tabs">
<div class="nav-tab">
<input type="radio" id="tab1" name="nav-group" checked>
<label for="tab1">foooooooo</label>
<div class="nav-content">
<div> stuff1 </div>
</div>
</div>
<div class="nav-tab">
<input type="radio" id="tab2" name="nav-group">
<label for="tab2">bar</label>
<div class="nav-content">
<div> stuff2 </div>
</div>
</div>
</div>
</div>
CSS
.nav-tabs-wrapper
{
padding: 10px; /* separates the code from other content */
border: 1px solid #F00; /* visibility aid */
}
.nav-tabs
{
position: relative; /* needed as future positioning reference base */
clear: both;
height: 200px; /* Unfortunate */
padding-left: 10px; /* provides the paragraph-tab effect to the tabs */
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
}
.nav-tab
{
float: left; /* keeps the tabs inline with no gap [inline-block introduces gaps] */
}
.nav-tab label
{
display: block; /* needed so tabs can be positioned correctly to hide nav-content border */
position: relative; /* needed to position tabs correctly */
top: 1px; /* lowers the tabs to cover the border of nav-content; needed so bottom corners aren't slanted, but a 90deg angle */
padding: 4px;
border: 1px solid #999;
border-bottom-width: 0px; /* removes bottom border; needed so bottom corners aren't slanted, but a 90deg angle */
background-color: #CCC;
}
.nav-tab [type=radio]
{
display: none; /* hide the radio selectors */
}
.nav-tab [type=radio]:checked ~ label
{
z-index: 2; /* makes sure that the active tab is drawn above nav-content to cover border */
background-color: #FFF; /* covers the nav-content border */
}
.nav-tab [type=radio]:checked ~ .nav-content
{
visibility: visible !important; /* unhides the nav-content div for the current tab */
}
.nav-tab:nth-child(n+2)
{
margin-left: -1px; /* positions the left border of every second+ tab over the previous tab's right border */
}
.nav-content
{
visibility: hidden; /* hides the content by default */
position: absolute; /* positions the content for all tabs to the absolute left relative to the tabs */
left: 0; /* undo's the padding from the paragraph-tab effect */
width: 100%; /* fills the nav-content DIV completely for a better looking border */
z-index: 1; /* makes sure that the border is drawn under the tabs */
border: 1px solid #999;
}
.nav-content div
{
padding: 10px; /* separate div needed to keep nav-content from overflowing due to padding */
}