javascript 双边框div应该合并css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27228686/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Double borders div should merge css
提问by Nick
If you look at this fiddleyou'll see that the borders won't merge.
css:
如果你看看这个小提琴，你会发现边界不会合并。
css：
div{
float:left;
background-color:moccasin;
width:100px;
height:100px;
border:1px solid tomato;
}
The amount of divs is random, and I can only give it 1 class/id.
Also keep in mind that the page can be resized and the amount of divs on a row can change.
div的数量是随机的，我只能给它1个class/id。
还要记住，页面可以调整大小，一行中的 div 数量可以改变。
I've tried margin-left:1px;and last-child/nth-child() selectors but they don't work when you resize the screen or it still gives unwanted border.
我已经尝试过margin-left:1px;last-child/nth-child() 选择器，但是当您调整屏幕大小时它们不起作用，或者它仍然提供不需要的边框。
edit:I can NOT move the divs for a single pixel, when I give the divs margin-left:-1px;and give the first div margin-left:1px;I'll get unwanted results in the next rows.
编辑：我不能移动单个像素的 div，当我给出 divmargin-left:-1px;并给出第一个 div 时，margin-left:1px;我会在下一行中得到不需要的结果。
回答by kapantzak
Just add to the div
只需添加到div
margin-top: -1px;
margin-left: -1px;
check the following example:
检查以下示例：
div{
float:left;
background-color:moccasin;
width:100px;
height:100px;
border:1px solid tomato;
margin-left: -1px;
margin-top: -1px;
}<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>ANOTHER SOLUTION WITH JSHere is the DEMO
JS 的另一种解决方案这是演示
CSS:
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:
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();
});
回答by misterManSam
We can simulate collapsed borders with box-shadow: 0 0 0 1px tomatoinsteadof a border; add a 1px left and bottom margin to align correctly.
我们可以用box-shadow: 0 0 0 1px tomato而不是边框来模拟折叠边框；添加 1px 左右边距以正确对齐。
This works because the box shadow is naturally overlapped; it does not take up space on its own. We reveal only the desired amount of shadow with the left and bottom margin.
这是有效的，因为框阴影是自然重叠的；它本身不占用空间。我们只显示所需的左侧和底部边距的阴影量。
With a 1px "border"
带有 1px 的“边框”
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
*/
}<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>With a 5px "border"
带有 5px 的“边框”
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
*/
}<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>