html - 元素周期表，元素在彼此之下

Question

我有一个关于 html/css 的项目来制作元素周期表。

我已经完成了，但现在我希望当我将屏幕大小调整为移动版本时，每个元素都位于另一个之下。

我给你两个元素来了解 html 部分：

    html
    <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">3</div>
        <div class="symbol">Li</div>
        <div class="at_details">Lithium</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">4</div>
        <div class="symbol">Be</div>
        <div class="at_details">Beryllium</div>
      </div>
    </div>

这是CSS部分：

    .periodic-row {
  clear: both;
  height: 10%;
}
.cell {
  float: left;
  position: relative;
  width: 5.55%;
  height: 100%;
}
.element {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
  background-color: rgb(45, 224, 209);
}
.at_num,
.at_details {
  position: absolute;
  color: rgb(255, 255, 255);
}
.at_num {
  top: 4px;
  right: 5px;
}
.symbol {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
}
.at_details {
  bottom: 4px;
  left: 0px;
  right: 0px;
}
.periodic-row:nth-child(-n+7) .cell:nth-child(n+13) .element {
  background-color: rgb(153, 221, 255);
}
.periodic-row:nth-child(2) .cell:nth-child(13) .element,
.periodic-row:nth-child(3) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(16) .element,
.periodic-row:nth-child(6) .cell:nth-child(16) .element {
  background-color: rgb(194, 224, 45);
}
.periodic-row:nth-child(1) .cell:nth-child(4n+1) .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14) .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15) .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16) .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17) .element,
.periodic-row:nth-child(6) .cell:nth-child(17) .element,
.periodic-row:nth-child(7) .cell:nth-child(17) .element {
  background-color: rgb(191, 191, 33);
}
.periodic-row:nth-child(-n+7) .cell:nth-child(18) .element {
  background-color: rgb(224, 147, 45);
}
.cell:nth-child(-n+2) .element{
  background-color: rgb(108, 45, 224);
}
.cell:nth-child(-n+1) .element{
  background-color: rgb(224, 45, 57);
}
.periodic-row:nth-child(n+8) .element {
  background-color: rgb(52, 143, 235);
}
.periodic-row:last-child .element{
  background-color: rgb(52, 235, 155);
}
@media (min-width: 600px) {
  .periodic {
    height: 460px;
    margin-right: -2px;
  }
  .element {
    right: 2px;
    bottom: 2px;
  }
  .at_num,
  .at_details {
    font-size: 8px;
    opacity: 1;
  }
  .symbol {
    margin-top: -17px;
    font-weight: bold;
    line-height: 30px;
    color: rgb(255, 255, 255);
    text-shadow: rgb(255, 255, 255);
  }
}
@media (min-width: 992px) {
  .periodic {
    height: 680px;
  }
  .at_num,
  .at_details {
    font-size: 11px;
  }
  .symbol {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  .periodic {
    height: 800px;
  }
  .at_num,
  .at_details {
    font-size: 13px;
  }
  .symbol {
    font-size: 30px;
  }
}

请参阅此处的 JsFiddle。

注意：我不能使用表格，这就是我这样做的原因

标签： htmlcss

Answer 1

请试试这个css。

.periodic-row {
  clear: both;
  height: 10%;
}
.cell {
  float: left;
  position: relative;
  width: 5.55%;
  height: 100%;
}
.element {
  padding: 5px;
  border: 1px solid rgb(0, 0, 0);
  text-align: center;
  background-color: rgb(45, 224, 209);
}
.at_num,
.at_details {
  color: rgb(255, 255, 255);
}
.symbol {
  top: 50%;
  left: 0px;
  right: 0px;
}
.at_details {
  bottom: 4px;
  left: 0px;
  right: 0px;
}
.periodic-row:nth-child(-n+7) .cell:nth-child(n+13) .element {
  background-color: rgb(153, 221, 255);
}
.periodic-row:nth-child(2) .cell:nth-child(13) .element,
.periodic-row:nth-child(3) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(14) .element,
.periodic-row:nth-child(4) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(15) .element,
.periodic-row:nth-child(5) .cell:nth-child(16) .element,
.periodic-row:nth-child(6) .cell:nth-child(16) .element {
  background-color: rgb(194, 224, 45);
}
.periodic-row:nth-child(1) .cell:nth-child(4n+1) .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14) .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15) .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16) .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17) .element,
.periodic-row:nth-child(6) .cell:nth-child(17) .element,
.periodic-row:nth-child(7) .cell:nth-child(17) .element {
  background-color: rgb(191, 191, 33);
}
.periodic-row:nth-child(-n+7) .cell:nth-child(18) .element {
  background-color: rgb(224, 147, 45);
}
.cell:nth-child(-n+2) .element{
  background-color: rgb(108, 45, 224);
}
.cell:nth-child(-n+1) .element{
  background-color: rgb(224, 45, 57);
}
.periodic-row:nth-child(n+8) .element {
  background-color: rgb(52, 143, 235);
}
.periodic-row:last-child .element{
  background-color: rgb(52, 235, 155);
}
@media (min-width: 600px) {
  .periodic {
    height: 460px;
    margin-right: -2px;
  }
  .element {
    right: 2px;
    bottom: 2px;
  }
  .at_num,
  .at_details {
    font-size: 8px;
    opacity: 1;
  }
  .symbol {
    font-weight: bold;
    line-height: 30px;
    color: rgb(255, 255, 255);
    text-shadow: rgb(255, 255, 255);
  }
}
@media (min-width: 992px) {
  .periodic {
    height: 680px;
  }
  .at_num,
  .at_details {
    font-size: 11px;
  }
  .symbol {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  .periodic {
    height: 800px;
  }
  .at_num,
  .at_details {
    font-size: 13px;
  }
  .symbol {
    font-size: 30px;
  }
}

<div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">3</div>
        <div class="symbol">Li</div>
        <div class="at_details">Lithium</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">4</div>
        <div class="symbol">Be</div>
        <div class="at_details">Beryllium</div>
      </div>
    </div>