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

组合边框和边距（即使使用边框）也很棘手，因为您的布局取决于容器宽度。最好将一个孩子添加到由砌体定位的元素中并且样式......

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

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

重叠1 px Borders制作更厚的边框

2 个答案: