html - 重叠 1 px 边框使边框更厚

Question

有没有办法，当我重叠（触摸）div 时，使 1px 边框不会变成 2 像素。而且我知道我可以在其中两条边上设置一个边框，但是 div 的一个边缘不会有边框。顺便说一句，我正在使用 jQuery Masonry。

Answer 1

是的，右边的 div 看起来像这样

     border: 1px solid #fff;
     border-left: none;

第二个border-left将覆盖刚刚放在那里的左边框

编辑：

好的，因为你正在使用 jQuery masonary - 这样做

            .container {
              width:50px;
              height:80px;
              border:1px solid black;
              margin-right: -1px;
              margin-bottom: -1px;
              }

我提到的重叠方法会起作用

Answer 2

结合边框和边距（即使使用边框框）很棘手，因为您的布局取决于容器宽度。最好将子元素添加到 Masonry 定位的元素和样式...

.container .post {
   float: left;
   width: 240px;
}

.container .text {
    outline: 1px solid #999;
    padding: 10px;
    margin: 0 1px 1px 0;
}

outline允许边框出现在 div 的“外部”，这使得它们更容易重叠

http://jsfiddle.net/4xmUY/

（如果您碰巧使用此答案，请接受斯科特的答案，因为这应该是对他的答案的评论，但解释不适合那里）。