CSS：重新安排div元素

我有多个<div>标记与width相同但在容器中不同height。当浏览器为resized和<div>元素重新排列时，它们之间会有很多空间。例如，下面的HTML：CSS：重新安排div元素

<div class="wrap"> 
    <div class="box"> 
     This has less height 
    </div> 
    <div class="box"> 
     This has more height 
    </div> 
    <div class="box"> 
     This has less height. 
    </div> 
</div>

现在，当浏览器的大小时，最后一个div将移动到左侧的第一个div下方，但因为中间div有更多的高度它们之间的空白区域。请看图片。

enter image description here 是否可以使用纯CSS安排这些div？我找不到方法，所以我尝试了jQuery masonry plugin，这工作正常，但问题是它通常不能很快响应（例如，当您第一次打开页面时，布局完全混乱，但如果刷新它的页面会变好）。

所以，如果它不可能只用CSS，有没有什么办法让它无需复杂的插件（使用jQuery例如只？）工作

的jsfiddle： http://jsfiddle.net/HS2Zh/

来源

2012-09-05 user1251698

删除这个你怎么想安排在调整大小的div？保持初始位置还是按照新的宽度重新焊接？如果你想回流，那么浮动是唯一的css方式来做它给你你所遇到的众所周知的副作用。 – Yoeri

是的，我想重新排列它们，但想要移除上面示例中所示的空白空间。有没有简单的jQuery方法来做到这一点，如果它不可能与CSS？ – user1251698

如果您正在使用Masonry并使用Ajax或其他方法加载大量内容，则只需在窗口加载时触发Masonry，而不是在文档准备好的情况下;或者您可以在加载内容后将Masonry的#container淡入。您的jsfiddle会立即加载，因此您必须查看您的在线沙箱才能查看发生什么情况以及为什么发生。 – Systembolaget

如果你追问是消除差距，您可以通过使用此代码

  var h = 0; 
      $('.box').each(function() 
      { 
       h = Math.max(h, $(this).height()); 
      }).height(h);

它将分配唯一的高度（■的最大高度）所有.box的类

来源

2012-09-05 09:59:04 Hearaman

这不会解决问题，因为这将使较小的div高度等于较大的div，反正会有空间（现在空间将成为较小的div的一部分）。 – user1251698

，可以办到通过使用jQuery砌体插件。希望这个链接可以帮助你http://masonry.desandro.com/

如果您正在使用该插件已经然后尝试给块之间有一些差距，这样将有自由空间就流向周围

来源

2012-09-05 09:57:18 Sowmya

OP已经使用'masonry'插件 –

CSS：重新安排div元素

回答

相关问题