javascript - 内联 block 网格系统 - CSS 不适用于动态创建的元素

我有一个内联 block 网格系统，我想做一些事情，比如添加重新排序元素并将其添加回网格。 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/

屏幕截图

最佳答案

你有一个空格问题!

当您运行脚本时，它会“刷新”没有空格的 HTML。

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

您的代码(使用 Javascript):

#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%;
}

<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>

没有空格，使用边距 + Javascript:

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

#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;
}

<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>

显然，最好的解决方案是实际修复您的 CSS 以避免这种丑陋的“hack”。

关于javascript - 内联 block 网格系统 - CSS 不适用于动态创建的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32635806/

javascript - 内联 block 网格系统 - CSS 不适用于动态创建的元素

上一篇：javascript - 用于 ul 列表的 HTML5 存储？

下一篇：javascript - 如何在指令中切换div的位置