正方形與每個邊緣上的選項卡

我在這裏，回到我的可怕的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

正方形與每個邊緣上的選項卡

回答

相關問題