html - 每边都有标签的正方形

Question

我又回来了，带着我可怕的 ASCII 技能! HTML 中的某些内容超出了我的理解范围，我无法真正理解如何将它们组合在一起。我正在努力实现这样的目标:

      + + + + + +
      + T  A  B +
    + + + + + + + +
+ + +             + + +
+ T +    MAIN     + T +
+ A +             + A +
+ B +             + B +
+ + +             + + +
    + + + + + + + +
      + T  A  B +
      + + + + + +

这将如何发挥 HTML 在我的脑海中不起作用。我无法想象你怎么把东西放在顶部，然后是左边、右边和底部。它只是没有意义。 Colspan 和 rowspan 似乎不起作用，我想不出没有大量的方法来做到这一点 <tr>和 <td>标签。

干杯，

嘎吱船长

Answer 1

您不应该使用表格进行布局。而是用 css 来做。

.container{
  width: 100px;
  height: 100px;
  position: relative;
  background: red;
  margin: 50px;
}

.tab{
  position: absolute;
  background: blue;
  color: #FFF;
}

.tab:nth-child(1),
.tab:nth-child(2){
  width: 100%;
  height: 50%;
  left: 0;
}

.tab:nth-child(3),
.tab:nth-child(4){
  height: 100%;
  width: 50%;
  top: 0;
}

.tab:nth-child(1){
  top: -50%;
}

.tab:nth-child(2){
  bottom: -50%;
}

.tab:nth-child(3){
  right: -50%;
}

.tab:nth-child(4){
  left: -50%;
}

<div class="container">
  <div class="tab">Tab 1</div>
  <div class="tab">Tab 2</div>
  <div class="tab">Tab 3</div>
  <div class="tab">Tab 4</div>
</div>