将div放在表格单元格中其他div的前面

debugcn 发表于 Dev

维克多·席尔瓦（Victor Silva）

一个表格单元格内，我有.interval div的，即必须出现并排侧，我也有.shift div的，即必须出现在前面.interval divs和有其特定的“左”和“宽度”值。

到目前为止，我设法我想只在单独的细胞（的方式定位的div .interval在第一行的div，.shift在第二行的div）：

但是，如何将它们放在同一单元格中，如下图所示？

我当前的代码：

table {
  width: 100%;
}
table tr,
table tr td {
  height: 48px;
}
table tr td {
  background-color: #EDEDED
}
.interval {
  height: 48px;
  float: left;
  background-color: #f9f2e2;
  box-sizing: border-box;
  border-left: solid 1px #d5cbc2;
  width: 10%;
}
.shift {
  height: 40px;
  float: left;
  position: relative;
  background-color: #e9e2d2;
}
.shift1 {
  left: 10%;
  width: 20%;
}
.shift2 {
  left: 40%;
  width: 10%;
}
.shift3 {
  left: 80%;
  width: 20%;
}

<table>
  <tr>
    <td>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
      <div class="interval"></div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="shift shift1"></div>
      <div class="shift shift2"></div>
    </td>
  </tr>
</table>

维克多·席尔瓦（Victor Silva）

我发现了怎么做：

table {
  width: 100%;
}
table tr,
table tr td {
  height: 48px;
}
table tr td {
  background-color: #EDEDED;
  position: relative;
}
.inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 48px;
}
.interval {
  height: 48px;
  float: left;
  background-color: #f9f2e2;
  box-sizing: border-box;
  border-left: solid 1px #d5cbc2;
  width: 10%;
}
.shift {
  margin: 4px 0;
  height: 40px;
  float: left;
  position: relative;
  background-color: #e9e2d2;
}
.shift1 {
  left: 10%;
  width: 20%;
}
.shift2 {
  left: 40%;
  width: 10%;
}

<table>
  <tr>
    <td width="60px">test:</td>
    <td>
      <div class="inner">
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
        <div class="interval"></div>
      </div>
      <div class="inner">
        <div class="shift shift1"></div>
        <div class="shift shift2"></div>
      </div>
    </td>
  </tr>
</table>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。