正方形与每个边缘上的选项卡

我在这里，回到我的可怕的ASCII技能！ HTML中的一些内容超出了我的想法，我无法真正理解如何将它们放在一起。我试图做到这样的事情：正方形与每个边缘上的选项卡

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

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

干杯，

紧缩队长

来源

2016-11-23 Captain Crunch

“这只是没有任何意义。”不，它没有。你为什么要这样做？ –

为了学习。这不是必需的，但知道如何帮助我成为更好的开发人员。 –

你见过这样的例子吗？发布一个链接到哪里。您还需要编辑您的问题，然后按CTRL + M并将所有代码放入框中。 – mlegg

您shouldntt使用表格布局。而是用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>

来源

2016-11-23 01:07:48

正方形与每个边缘上的选项卡

回答

相关问题