使用CSS創建櫥櫃

Question

我已經找到了一個櫥櫃的代碼板。

我真的可以將它用於我的網站，但是當我嘗試添加兩個貨架時，最下面的兩個貨架都在櫃子外面。當玩弄櫃子的高度時，貨架只是收縮/增長，但底部的2個貨架仍然在櫃子外面。

我嘗試在底層貨架上添加邊框，但情況更糟。

我試着製作一個只有2個架子的櫥櫃，但是你會在底部得到這個醜陋的棕色方形。

爲什麼我看到所有這些問題？

.cabinet { 
 
    position: absolute; 
 
    width: 460px; 
 
    height: 500px; 
 
    background-color: #45221c; 
 
    top: 40px; 
 
    left: 30%; 
 
    border: 10px solid #69342b; 
 
    box-sizing: border-box; 
 
} 
 
.cabinet .cabinet-top { 
 
    width: 104%; 
 
    height: 0; 
 
    border-bottom: 10px solid #572b23; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    box-sizing: border-box; 
 
    top: -20px; 
 
    left: -2%; 
 
    position: absolute; 
 
} 
 
.cabinet .shelf { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20%; 
 
    box-sizing: border-box; 
 
} 
 
.cabinet .shelf .back { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 2%; 
 
    width: 96%; 
 
    height: 100%; 
 
    background: #2c1512; 
 
    box-shadow: inset 10px 15px 15px #21100d; 
 
} 
 
.cabinet .shelf .base { 
 
    width: 100%; 
 
    height: 0; 
 
    border-bottom: 20px solid #331915; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    box-sizing: border-box; 
 
    bottom: 10px; 
 
    position: absolute; 
 
} 
 
.cabinet .shelf .front { 
 
    width: 100%; 
 
    height: 10px; 
 
    background-color: #69342b; 
 
    position: absolute; 
 
    bottom: 0; 
 
}

<div class="cabinet"> 
 
    <div class="cabinet-top"></div> 
 

 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 

 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 
    </div> 
 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 

 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 

 
    </div> 
 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 
    </div> 
 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 
    </div> 
 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 
    </div> 
 

 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 
    </div> 
 

 
    <div class="shelf"> 
 
    <div class="upper-left-triangle"></div> 
 
    <div class="upper-right-triangle"></div> 
 
    <div class="back"></div> 
 
    <div class="base"></div> 
 
    <div class="front"></div> 
 
    </div> 
 
</div>

CODEPEN：

http://codepen.io/cogitatio/pen/dpword?editors=1100

Answer 1

的問題是，因爲貨架上的身高是百分比 - 相對於櫃子的整體高度。當前貨架的百分比合計爲100％，通過增加更多貨架百分比超過100％，所以您可以看到底部的額外貨架。

我改變了貨架的高度，以14.5％

http://codepen.io/anon/pen/vXvOpV?editors=1100

.cabinet .shelf { 
    position: relative; 
    width: 100%; 
    height: 14.5%; 
    box-sizing: border-box; 
} 

Answer 2

你必須設置固定的高度.cabinet .shelf和增加.cabinet

.cabinet { 
    position: absolute; 
    width: 460px; 
    height: 752px; 
    background-color: #45221c; 
    top: 40px; 
    left: 30%; 
    border: 10px solid #69342b; 
    box-sizing: border-box; 
} 

.cabinet .shelf { 
    position: relative; 
    width: 100%; 
    height: 106px; 
    box-sizing: border-box; 
} 

高度

CODEPEN

Answer 3

您需要根據機櫃中添加的貨架數量調整.cabinet .shelf類別高度百分比。

隨着從所共享的代碼看起來，它計算與下述式

100％/貨架總數=每個貨架的高度百分比 例如所述貨架的高度百分比

100％/ 5 = 20％

現在你加入2新上架在這使得貨架7的數量，以便現在針對每個貨架要設置的百分比機櫃是

100 ％/ 7 = 14.30％

（增加值小數點後精確地調整。對我來說，我增加0.15以上，使之14.45％調整）

希望這有助於。