使用 CSS 创建橱柜

Question

我找到了这个带柜子的codepen。

我真的可以将它用于我的网站，但是当我尝试添加两个架子时，底部的 2 个架子在柜子外面。当玩弄橱柜的高度时，架子只是 shrink/grow 但底部的 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>

编码：

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 class 高度百分比。

从您分享的代码来看，它是用以下公式计算货架高度百分比

100%/货架数量=每个货架高度百分比例如

100% / 5 = 20%

现在您在柜子中添加 2 个新搁板，使搁板数量变为 7，因此现在为每个搁板设置的百分比为

100% / 7 = 14.30% 大约。

（增加小数点后的值以准确调整。对我来说，我增加了 0.15 使其调整为 14.45%）

希望对您有所帮助。

使用 CSS 创建橱柜

Creating a cabinet using CSS

html

css

frontend