絕對定位的CSS3標籤欄下的內容

Question

我目前正在使用CSS3製作的標籤欄（我真的想避免任何javascript/jquery）。我找到了一個很好的教程，並修改了我的需求的源代碼。不幸的是，我的標籤欄下的任何內容都將放置在「tab-content」-id的背景中，因爲它們位於絕對模式。但我想要頁腳出現在可變高度的標籤欄內容下面，不在其後面。我已經嘗試更改定位參數，但結果「標籤內容」將在單個tab1/2/3/4標籤下流動。

這是我樣式表：

.tabs input[type=radio] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
.tabs { 
    width: 960px; 
    float: none; 
    list-style: none; 
    position: relative; 
    padding: 0; 
    margin-top:30px; 
    font-size:14px; 
} 
.tabs li { 
    float: left; 
} 
.tabs label { 
    display: block; 
    padding: 10px 20px; 
    cursor: pointer; 
    position: relative; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
    color: #aaa; 
} 
.tabs label:hover { 
    top: 0; 
    color: #000; 
} 
[id^=tab]:checked + label { 
    color: #000; 
} 
[id^=tab]:checked ~ [id^=tab-content], [id^=tab]:checked ~ [id^=tab-content] > div { 
    display: block; 
} 
.tab-content { 
    z-index: 2; 
    display: none; 
    text-align: left; 
    overflow: hidden; 
    width: 100%; 
    line-height: 140%; 
    padding-top: 10px; 
    padding: 15px; 
    position: absolute; 
    top: 53px; 
    left: 0; 
    box-sizing: border-box; 
    font-size:14px; 
    float:left; 
} 
.tab-content > div { 
    display: none; 
    -webkit-animation-duration: 0.5s; 
    -o-animation-duration: 0.5s; 
    -moz-animation-duration: 0.5s; 
    animation-duration: 0.5s; 
} 
.TabBar { 
    float:left; 
    width: 960px; 
    height:auto; 
} 

和我HTML源代碼：

<!-- TABBAR !--> 
    <div class="TabBar"> 
    <ul class="tabs"> 
     <li> 
     <input type="radio" checked name="tabs" id="tab1"> 
     <label for="tab1">First Tab</label> 
     <div id="tab-content1" class="tab-content"> 
      <div class="animated fadeInRight"> Lorem Ipsum 1 </div> 
     </div> 
     </li> 
     <li> 
     <input type="radio" name="tabs" id="tab2"> 
     <label for="tab2">Second Tab</label> 
     <div id="tab-content2" class="tab-content"> 
      <div class="animated fadeInRight"> Lorem Ipsum 2 </div> 
     </div> 
     </li> 
     <li> 
     <input type="radio" name="tabs" id="tab3"> 
     <label for="tab3">Third Tab</label> 
     <div id="tab-content3" class="tab-content"> 
      <div class="animated fadeInRight "> Lorem Ipsum 3 </div> 
     </div> 
     </li> 
     <li> 
     <input type="radio" name="tabs" id="tab4"> 
     <label for="tab4">Fourth Tab</label> 
     <div id="tab-content4" class="tab-content"> 
      <div class="animated fadeInRight "> Lorem Ipsum 4 </div> 
     </div> 
     </li> 
    </ul> 
    </div> 

在這裏，我的問題對CodePen一個例子：http://codepen.io/DanielCoding/pen/Fxrnw

我不知道我該如何處理這件事。

預先感謝您！

Answer 1

如果我明白這個問題，你必須改變你的CSS一些合適的。

1. .tab-content set whitout position propiretes（only float：left;）and set margin-top：35px;
2. .tabs標籤設置位置：絕對，並設置爲left標籤獨立類似.tabs標籤：nth-​​child（1）{left：0px} .tabs標籤：nth-​​child（2）{left：100px}。標籤標籤：nth-​​child（3）{left：200px}

現在您可以在頁面末尾添加div頁腳。

我希望這個幫助。

Answer 2

如果我明白這個問題，那麼你只需要添加一些CSS來強制標籤容器環繞浮動元素並佔據元素的高度。

只需添加

.tabs { 
    overflow:hidden; 
    ... 

我希望這有助於。

Answer 3

我修改了你的css。現在它工作正常。

.wrapper .TabBar { 
    position: relative; 
    height: 200px; 
} 
.wrapper .TabBar ul { 
    padding: 0; 
} 
.wrapper .TabBar ul li { 
    list-style: none; 
    display: inline-block; 
} 
.wrapper .TabBar ul li input[type=radio] { 
    position: relative; 
    width: 100%; 
    opacity: 0; 
    top: 20px; 
    cursor: pointer; 
} 
.wrapper .TabBar ul li input[type=radio]:checked ~ .tab-content { 
    display: block; 
} 
.wrapper .TabBar ul li input[type=radio]:checked + label { 
    background-color: #00c9ed; 
} 
.wrapper .TabBar ul li input[type=radio]:hover + label { 
    background-color: #8eeeff; 
} 
.wrapper .TabBar ul li label { 
    cursor: pointer; 
    display: block; 
    background-color: #eee; 
    padding: 10px; 
} 
.wrapper .TabBar ul li label:hover { 
    background-color: #8eeeff; 
} 
.wrapper .TabBar ul li .tab-content { 
    position: absolute; 
    left: 0; 
    display: none; 
} 

您需要應用您的動畫。