双边界div应合并css

Question

如果您查看此fiddle，您会看到边框不会合并 的CSS：

div{
    float:left;
    background-color:moccasin;
    width:100px;
    height:100px;
    border:1px solid tomato;
}

div的数量是随机的，我只能给它1个class / id。
另请注意，页面可以调整大小，并且行上的div数量可以更改。

我已经尝试了margin-left:1px;和last-child / nth-child（）选择器，但是当你调整屏幕大小时它们不起作用，或者它仍然会产生不必要的边框。

编辑：我无法移动单个像素的div，当我给div margin-left:-1px;并给出第一个div margin-left:1px;时，我会得到不需要的结果下一行。

Answer 1

只需添加到div

即可

margin-top: -1px;
margin-left: -1px;

检查以下示例：

＆＃13;

＆＃13;

div{
    float:left;
    background-color:moccasin;
    width:100px;
    height:100px;
    border:1px solid tomato;
    margin-left: -1px;
    margin-top: -1px;
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;

JS的另一个解决方案 这是DEMO

CSS：

div{
float:left;
background-color:moccasin;
width:100px;
height:100px;    
border-bottom:1px solid tomato;
border-right:1px solid tomato;
}
div:first-child{
border-left:1px solid tomato;
}
div.first-row {
border-top: 1px solid tomato;
}

jQuery的：

var borderCollapse = function() {
var div = $('div');
var divWidth = 0;
var rows = 1;
div.each(function() {
var that = $(this);
var div = $('div');
var width = div.parent().width();
var thisWidth = $(this).width();

if (divWidth < width) {    
    that.prev().not('div:first-child').css({'border-left':'0'});
    divWidth += parseInt(thisWidth);        
} else { 
    that.prev().css({'border-left':'1px solid tomato'});
    divWidth = 2 * thisWidth;
    rows += 1;        
}

if (rows <= 1) {
    that.prev().addClass('first-row');
} else {
    that.prev().removeClass('first-row');
}

});
}

borderCollapse();

$(window).resize(function() {
  borderCollapse();
});

Answer 2

我们可以使用box-shadow: 0 0 0 1px tomato 代替来模拟折叠的边框;添加1px左下边距以正确对齐。

这是因为盒子阴影自然重叠;它不会占用空间。我们只显示左边距和下边距所需的阴影量。

使用1px＆＃34; border＆＃34;

＆＃13;

＆＃13;

div {
  float: left;
  background-color: moccasin;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 1px tomato;
  margin: 0 0 1px 1px; 
 /* the margin provides a little nudge as 
 box shadow won't take up space like a border 
 */
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;

使用5px＆＃34; border＆＃34;

＆＃13;

＆＃13;

div {
  float: left;
  background-color: moccasin;
  width: 100px;
  height: 100px;
  box-shadow: 0 0 0 5px tomato;
  margin: 0 0 5px 5px; 
 /* the margin provides a little nudge as 
 box shadow won't take up space like a border 
 */
}

＆＃13;

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;