標籤和內容之間的空白空間

Question

我想顯示每個標籤的內容。但是有一個空的空間。

第一個選項卡中沒有可用空間，但它存在於其他選項卡中。我想消除這種差距

如何解決這個問題？ （請不要提出任何Java腳本代碼。）

下圖顯示了這個問題

There is an empty space between the tab and the content

.tab-caption:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-caption:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-caption:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-content:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-content:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-content:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-status { 
 
    display: none; 
 
} 
 

 
    .tab-status ~ .tab-caption-container { 
 
     display: flex; 
 
    } 
 

 
     .tab-status ~ .tab-caption-container > .tab-caption { 
 
      opacity: 0.4; 
 
      cursor: pointer; 
 
     } 
 

 
    .tab-status:nth-of-type(1):checked ~ .tab-caption-container > .tab-caption:nth-of-type(1) { 
 
     opacity: 1; 
 
    } 
 

 
    .tab-status:nth-of-type(2):checked ~ .tab-caption-container > .tab-caption:nth-of-type(2) { 
 
     opacity: 1; 
 
    } 
 

 
    .tab-status:nth-of-type(3):checked ~ .tab-caption-container > .tab-caption:nth-of-type(3) { 
 
     opacity: 1; 
 
    } 
 

 
    .tab-status ~ .tab-content-container > .tab-content { 
 
     width: 100%; 
 
     transform: translate(-100%); 
 
     transition: all 1s; 
 
    } 
 

 
    .tab-status:nth-of-type(1):checked ~ .tab-content-container > .tab-content:nth-of-type(1), 
 
    .tab-status:nth-of-type(2):checked ~ .tab-content-container > .tab-content:nth-of-type(2), 
 
    .tab-status:nth-of-type(3):checked ~ .tab-content-container > .tab-content:nth-of-type(3) { 
 
     transition: all 1s; 
 
     transform: translate(0%); 
 
     transition-delay: 1s; 
 
    } 
 

 
.tab-content-container { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid #ccc; 
 
    float: left; 
 
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked"> 
 
    <input class="tab-status" id="tabSwitch02" type="radio" name="tab"> 
 
    <input class="tab-status" id="tabSwitch03" type="radio" name="tab"> 
 
    <div class="tab-caption-container"> 
 
     <label class="tab-caption" for="tabSwitch01">tab1</label> 
 
     <label class="tab-caption" for="tabSwitch02">tab2</label> 
 
     <label class="tab-caption" for="tabSwitch03">tab3</label> 
 
    </div> 
 
    <div class="tab-content-container"> 
 
     <div class="tab-content">tab1-data<br></div> 
 
     <div class="tab-content">tab2-data<br>tab2-data<br></div> 
 
     <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div> 
 
    </div>

Answer 1

玩水，我改變了CSS的.tab-content使得高度也動畫。因爲它沒有任何用途，所以我也刪除了浮點數.tab-content-container。

.tab-caption:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-caption:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-caption:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-content:nth-of-type(1) { 
 
    background-color: #FFAAAA; 
 
} 
 

 
.tab-content:nth-of-type(2) { 
 
    background-color: #AAFFAA; 
 
} 
 

 
.tab-content:nth-of-type(3) { 
 
    background-color: #AAAAFF; 
 
} 
 

 
.tab-status { 
 
    display: none; 
 
} 
 

 
.tab-status~.tab-caption-container { 
 
    display: flex; 
 
} 
 

 
.tab-status~.tab-caption-container>.tab-caption { 
 
    opacity: 0.4; 
 
    cursor: pointer; 
 
} 
 

 
.tab-status:nth-of-type(1):checked~.tab-caption-container>.tab-caption:nth-of-type(1) { 
 
    opacity: 1; 
 
} 
 

 
.tab-status:nth-of-type(2):checked~.tab-caption-container>.tab-caption:nth-of-type(2) { 
 
    opacity: 1; 
 
} 
 

 
.tab-status:nth-of-type(3):checked~.tab-caption-container>.tab-caption:nth-of-type(3) { 
 
    opacity: 1; 
 
} 
 

 
.tab-status~.tab-content-container>.tab-content { 
 
    width: 100%; 
 
    transform: translate(-100%); 
 
    transition: all 1s; 
 
    height: 0; 
 
} 
 

 
.tab-status:nth-of-type(1):checked~.tab-content-container>.tab-content:nth-of-type(1), 
 
.tab-status:nth-of-type(2):checked~.tab-content-container>.tab-content:nth-of-type(2), 
 
.tab-status:nth-of-type(3):checked~.tab-content-container>.tab-content:nth-of-type(3) { 
 
    transition: all 1s; 
 
    transform: translate(0%); 
 
    transition-delay: 1s; 
 
    height: 100%; 
 
} 
 

 
.tab-content-container { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid #ccc; 
 
}

<input class="tab-status" id="tabSwitch01" type="radio" name="tab" checked="checked"> 
 
<input class="tab-status" id="tabSwitch02" type="radio" name="tab"> 
 
<input class="tab-status" id="tabSwitch03" type="radio" name="tab"> 
 
<div class="tab-caption-container"> 
 
    <label class="tab-caption" for="tabSwitch01">tab1</label> 
 
    <label class="tab-caption" for="tabSwitch02">tab2</label> 
 
    <label class="tab-caption" for="tabSwitch03">tab3</label> 
 
</div> 
 
<div class="tab-content-container"> 
 
    <div class="tab-content">tab1-data<br></div> 
 
    <div class="tab-content">tab2-data<br>tab2-data<br></div> 
 
    <div class="tab-content">tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br>tab3-data<br></div> 
 
</div>

Answer 2

空的空間是因爲一個事實，即仍有在瀏覽器三維空間中存在前一個選項卡的內容（各種），導致其他選項相應地向下移動。您需要有效地使它們在視覺上以及在瀏覽器3d空間中都不可見，即將其顯示屬性設置爲display:none。但是這會引起另一個問題，問題是display:none不受任何轉換時序/延遲的影響，因此它幾乎是瞬時的，而其他轉換將毫無用處。

所以總結起來有三種選擇

1. 找到某種方式來實現的JavaScript/jQuery代碼。
2. 你只需要忍受它。與周圍的float和position性能