浮动div之间的间隙 [英] Gap between floating divs
问题描述
我总是想知道如果它们不具有相同的高度，如何解决浮动元素之间的差距：
I always wondered how to fix the gap between floating elements if they don't have the same height:
这里你可以看到特别和通知我想摆脱。 （当屏幕分辨率较大时，Get会更大，因为特色框变得更加拉伸，因此文本扩展到较少的行）
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
也许需要注意的是，这是浮动左侧元素的顺序：
Maybe important to note that this is the order of the floating left elments:
- 精选
- 新闻
- 标题
- 注意
- Featured
- News
- Headlines
- Notice
小屏幕的布局（这看起来非常好我只是想告诉你什么意味着在下面的描述中，基于屏幕分辨率的不一致的布局）
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
如果设计是一致的，我不介意实现某种网格系统，但在我的情况下，我使用基于屏幕分辨率的样式，所以在某个屏幕分辨率下，框从50 ％至100％宽度（此处不使用固定值）。
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
我认为流体网格可能是正确的方法，但检查后（从未使用过）他们感觉很稳定，我不确定他们能否解决这个问题。
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
编辑：
http://jsfiddle.net/UfVrH/ 。注意，AD中的固定高度值只用于模拟扩展div的内容。
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
推荐答案
计算每个元素的宽度和高度，并通过对它们进行绝对定位来重新排列它们，幸运的是有一个这样的插件，同位素
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
这篇关于浮动div之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
