沒有外部邊界的響應式網格

Question

我正在嘗試創建一個響應式網格，它使用CSS按內部邊界分隔圖標/圖塊集合（請參見下面的佈局）。

CONTAINER | CONTAINER | CONTAINER 
--------------------------------- 
CONTAINER | CONTAINER | CONTAINER 

我已經能夠做到這一點使用第一胎/最後一子選擇，但不是在與另外的容器秤和響應的方式。

http://codepen.io/patrickabel/pen/VmRyqQ

有沒有辦法做到這一點沒有JavaScript？

Answer 1

它不是100％清楚你需要什麼，但是有什麼理由不使用表嗎？事情是這樣的：

td { 
 
    text-align: center; 
 
    padding: 5px; 
 
} 
 

 
table { 
 
    border-collapse: collapse; 
 
} 
 
table td, table th { 
 
    border: 1px solid black; 
 
} 
 
table tr:first-child td, table tr:first-child th { 
 
    border-top: 0; 
 
} 
 
table tr:last-child td { 
 
    border-bottom: 0; 
 
} 
 
table tr td:first-child, 
 
table tr th:first-child { 
 
    border-left: 0; 
 
} 
 
table tr td:last-child, 
 
table tr th:last-child { 
 
    border-right: 0; 
 
}

<table class="container"> 
 
    <tr class="row"> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    <td>D</td> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr class="row"> 
 
    <td>This</td> 
 
    <td>Is</td> 
 
    <td>A</td> 
 
    <td>Test</td> 
 
    <td>Phrase</td> 
 
    <td>:)</td> 
 
    </tr> 
 
</table>