使用边框制作多个 div 的单个边框答案

【问题标题】：Make single border of multiple divs with borders使用边框制作多个 div 的单个边框
【发布时间】：2018-05-11 11:37:27
【问题描述】：

所有元素都可以通过snap 函数拖动（jquery-ui）。

每个 div 都有一个边框，所以如果两个 div 彼此相邻，它将有一个双边框。在 jquery-ui 的 snap 功能中，您可以看到哪些 div 正在相互对齐，但看不到在哪一侧。

如何检查哪些 div 发生冲突，以便删除 1 个 div 的边框，使其成为 div 之间的单个边框？

【问题讨论】：

问题是什么？请编辑问题标题，因为没有明确的问题。
你应该分享你的代码，没有它我们什么都做不了。
边框是 DIv 的一部分，因此具有渲染功能。您可以添加margin: -1px;，其中负像素数等于 div 的边框。这将允许边界存在但不是碰撞的一部分。
可能重复：stackoverflow.com/questions/17915865/…

标签： jquery html css jquery-ui jquery-ui-draggable

【解决方案1】：

您可以调整每个<DIV> 以显示为表格的一部分。这有点复杂。如前所述，您可以调整为只使用margin: -1px; 我也非常喜欢box-shadow 的建议。一个例子：

$(function() {
  $(".drag").draggable({
    containment: "parent",
    handle: ".drag-handle",
    snap: true
  });
  $(".drag-handle").each(function(ind, el) {
    var $par = $(el).parent();
    $(el).position({
      my: "right top",
      at: "right-5 top+5",
      of: $par
    });
  });
});

.canvas {
  border: 2px solid #000;
  display: inline-block;
  border-collapse: collapse;
  width: 440px;
  height: 300px;
}

.drag {
  /*
  border: 1px solid #000;
  */
  box-shadow: 1px 0px #000, 0px 1px #000, 1px 1px #000, 1px 0px #000 inset, 0px 1px #000 inset;
  float: left;
}

.drag label {
  margin: 2px;
}

.drag .drag-handle {
  border-radius: 6px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="canvas ui-widget">
  <div id="item-1" class="drag" style="width: 100%; height: 90px;">
    <label>DIV 1</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
  <div id="item-2" class="drag" style="width: 50%; height: 60px;">
    <label>DIV 2</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
  <div id="item-3" class="drag" style="width: 50%; height: 60px;">
    <label>DIV 3</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
  <div id="item-4" class="drag" style="width: 100%; height: 80px;">
    <label>DIV 4</label>
    <span class="ui-icon ui-icon-arrow-4 drag-handle"></span>
  </div>
</div>

改编自此处看到的答案：How to make borders collapse (on a div)?

【讨论】：

是的，就是这样，但是左侧有一个双边框。其他方面完全完美！
@MarcelWeidum 可以对外盒做同样的事情。或padding: -1px;