javascript 二重境界divはCSSをマージする必要があります




jquery set css class (2)

このfiddleを見ると、境界線が合流しないことがわかります。
css:

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

divの量はランダムであり、私はそれに1クラス/ idを与えることができます。
また、ページのサイズを変更したり、1行のdiv数を変更したりできることにも注意してください。

私はmargin-left:1px;を試してみましたmargin-left:1px; そしてlast-child / nth-child()セレクターですが、画面のサイズを変更してもうまくいかないか、それでもまだ不要な境界線が表示されます。

編集:私はdivs margin-left:-1px;に与えたとき、私は、単一のピクセルのmargin-left:-1px;移動することはできませんmargin-left:-1px; そして最初のdiv margin-left:1px; 次の行には望ましくない結果が出ます。


divに追加するだけです

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

次の例を確認してください。

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>

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();
});

box-shadow: 0 0 0 1px tomatoを使用して、折りたたまれた境界線をシミュレートできます。 正しく揃えるには、左右に1ピクセルの余白を追加します。

これは、ボックスの影が自然に重なっているために機能します。 それだけではスペースを取らない。 左と下の余白を使って、必要なだけの影を表示します。

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>

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>





css3