Question

我正在尝试使用CSS创建一个响应式网格，它通过内边框分隔图标/图块集合（请参阅下面的布局）。

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

我已经能够使用first-child / last-child选择器实现这一目标，但不能以与其他容器一起扩展的方式实现并且响应迅速。

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

有没有办法在没有JavaScript的情况下实现这一目标？

Answer 1

它不是100％清楚你需要什么，但有没有理由不使用桌子？像这样：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

响应网格没有外边框

1 个答案: