Question

我有一个内联块网格系统，我想做一些事情，比如添加重新排序元素并将其添加回网格。 js部分没问题，但是当元素添加回来时，它不会应用css。我做了一个简单的案例来向你展示错误

打开链接并尝试点击显示错误按钮，您会看到元素搞乱

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<style>
#grid{
  text-align: justify;
  font-size: 0.1px;
}

#grid .item{
  display: inline-block;
  background: #eee;
  width: 23%;
  height: 100px;
  margin-bottom: 2.5%;
}

#grid:after{
  content: '';
  display: inline-block;
  width: 100%;
}

#grid .placeholder{
  display: inline-block;
  width: 23%;
}
</style>

<script>
$(function(){
    $('button').click(function(){
        var item = $('#grid').children('.item');
            item.prependTo('#grid');
    });

});
</script>

<div id="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>
<button>show the error</button>
</body>
</html>

https://jsfiddle.net/6ap0ksy8/2/

屏幕截图

Answer 1

你有空白问题！

运行脚本时，它会刷新＆＃39;没有空格的HTML。

您应该删除所有空格，使其看起来像错误的版本。之后，你必须在左边和右边设置一个边距，这样它总是看起来很好。

您的代码（使用Javascript）：

＆＃13;

#grid{
  text-align: justify;
  font-size: 0.1px;
}

#grid .item{
  display: inline-block;
  background: #eee;
  width: 23%;
  height: 100px;
  margin-bottom: 2.5%;
}

#grid:after{
  content: '';
  display: inline-block;
  width: 100%;
}

#grid .placeholder{
  display: inline-block;
  width: 23%;
}

＆＃13;

<div id="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="placeholder"></div>
  <div class="placeholder"></div>
</div>

＆＃13;

没有空格，使用margin + Javascript：

＆＃13;

$(function(){
	$('button').click(function(){
		var item = $('#grid').children('.item');
			item.prependTo('#grid');
	});
	
});

＆＃13;

#grid{
  text-align: justify;
  font-size: 0.1px;
}

#grid .item{
  display: inline-block;
  background: #eee;
  width: 23%;
  height: 100px;
  margin-bottom: 2.5%;
  /*added margin*/
  margin-left: 5px;
  margin-right: 5px;
}

#grid:after{
  content: '';
  display: inline-block;
  width: 100%;
}

#grid .placeholder{
  display: inline-block;
  width: 23%;
  /*added margin*/
  margin-left: 5px;
  margin-right: 5px;
}

＆＃13;

<div id="grid">
  <div class="item"></div><--
  --><div class="item"></div><--
  --><div class="item"></div><--
  --><div class="item"></div><--
  --><div class="item"></div><--
  --><div class="item"></div><--
  --><div class="placeholder"></div><--
  --><div class="placeholder"></div>
</div>
<button>show the error</button>

＆＃13;

显然，最好的解决方案是实际修复你的CSS以避免这种丑陋的黑客攻击。

Answer 2

$(function(){
    $('button').click(function(){
        var item = $('#grid').children('.item');
            item.prependTo('#grid');
            $('.item').after(" "); // add white space
    });

});

添加的空白区域将补偿由jquery

修剪的空白区域

内联块网格系统 - css不适用于动态创建的元素

2 个答案: