jquery - 使用jQuery自动清除x div后的浮点数？- 例如可变高度打破设计

Question

好的，对于我的内部内容，例如 4 x 列布局 - 向左浮动，设置宽度......所以它们彼此相邻......

麻烦的是您在该集合中添加了更多元素，例如第 5 或第 6 个元素（例如新行）-...如果前 4 列的高度不同，则第二行全部未对齐，如您所料...所以我'我写信问，是否有 jQuery 方式（或者可能是其他方式） - 这将允许您在一个 div 内的 x 个 div 之后添加一个“clear:both”（在这种情况下，在 4 个 div 之后清除该行）。 .. 很多内容将从数据库中自动提取，所以我没有手动添加 clear:both 的选项。

希望这是有道理的，这是我的第一篇文章，所以请告知我是否做错了什么，或者可以更好地解释。

Answer 1

$('div:nth-of-type(4n)').append('<div style="clear:both;"></div>');

那是你需要的吗？

Answer 2

您可以通过切换到使用display: inline-block而不是浮动来响应地执行此操作而无需 JS。

http://codepen.io/cimmanon/pen/dwbHi

.gallery {
  margin: -10px 0 0 -10px;
  overflow: hidden;
}

.gallery img {
  margin: 10px 0 0 10px;
  display: inline-block;
  vertical-align: text-top;
}

  <div class="gallery">
    <img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x120" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x140" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x130" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/200x100" /><!--
    --><img src="http://placehold.it/180x100" /><!--
    --><img src="http://placehold.it/200x90" />
  </div>