双边框div应该合并css [英] Double borders div should merge css

问题描述

如果你看这个小提琴，你会发现边框不会合并。 >
css：

  div {
 float：left; 
 background-color：moccasin; 
 width：100px; 
 height：100px; 
 border：1px固体番茄; 
} 
  

div的数量是随机的，我只能给它1个类/ ID。


请记住，页面可以调整大小，并且行数可以改变。

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

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

解决方案

只需添加到div

  top：-1px; 
 margin-left：-1px; 
  

请检查以下示例：

  div {float：left;背景色：莫卡辛;宽度：100像素;高度：100像素;边界：1px固体番茄; 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>

CSS：

  div {
 float：left; 
 background-color：moccasin; 
 width：100px; 
 height：100px; 
 border-bottom：1px固体番茄; 
 border-right：1px固体番茄; 
} 
 div：第一个孩子{
 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（） 。宽度（）; 
 var thisWidth = $（this）.width（）; 
 
 if（divWidth< width）{
 that.prev（）。not（' （''border-left'：'0'}）; 
 divWidth + = parseInt（thisWidth）; 
} else {
 that.prev（ ）.css（{'border-left'：'1px solid tomato'}）; 
 divWidth = 2 * thisWidth; $ b $ rows + = 1; 
} 
 $ b $ （行<= 1）{
 that.prev（）。addClass（'first-row'）; 
} else {
 that.prev（）。removeClass（'first -row'）; 
} 
 
}）; 
} 
 
 borderCollapse（）; 
 $ b $（window）.resize（function（）{
 borderCollapse（）; 
}）; 
  

If you look at this fiddle you'll see that the borders won't merge.
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.

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.

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.

解决方案

Just add to the 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 JS Here is the 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();
});

这篇关于双边框div应该合并css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！