清洁方式将边框彼此相邻放置 - 产生1 px宽的边框

Question

好的以下jsfiddle场景.广场来自CMS,我不能硬编码.我需要一个干净的方法来始终获得1个边框厚度.此时边界厚度有时为1像素,有时为2像素.给出容器的宽度,它总是3个方格宽.所以它永远不会有2个方格.始终$ number_of_squares%3 === 0查看截图

它有诀窍吗？

HTML:

<div class="container"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>

CSS:

div{
    display:inline-block;
    height: 100px;
    width: 100px;
    vertical-align: top;
    background-color: burlywood;
    border: 1px solid #ccc;
}

.container{
    width: 400px;
    height: 400px;
    background-color: white;
    border: none;
}

见jsfiddle

Answer 1

给容器padding:1px 0 0 1px;

&divs margin:-1px 0 0 -1px;

这是jsFiddle:DEMO