CSS图片库浮动BUG [英] CSS Image Gallery Float BUG
问题描述
这是一个新的，我有一个存档页面，我做的问题。它看起来像一个相当直接的向前浮动的div图像库...但由于某些原因，有一堆线断裂随机地在整个div。我认为这可能是Cufon或IE.JS等问题，但我禁用所有的JS，它仍然存在bug。
看起来有点长的代码在这里，我抛出了一堆不必要的div和明确的修复，但似乎没有什么工作。
由于一些标题比其他标题长，所以我会发布和组织一个正确的报告。一些断线，从而使div更高。浮游物然后将挂在这些较高的div。这不是一个错误，它只是浮动的工作原理。
--- --- ---
| 1 | | 2 | | 3 |
--- | | ---
--- ---
| 4 |
---
---
| 5 |
---
避免这个问题的最好方法是给每个div一个set
或者，您可以通过为每个第一/第/第七/ etc div添加一个适当的类，使每行的第一个div为clear：left / p>
编辑：详细说明如何浮动：
每个div尝试适合与上一个div在同一行，尽可能向左漂浮。如果线上没有剩余空间，它将首先被按下，然后向左。在上面的例子中，4将被向下推3，然后它将向左移动尽可能，击中2. 5被向下推4，然后尽可能地向左移动。
This is new one, I'm having problem with an Archive page i've made. It seems like a fairly straight forward floated div image gallery... but for some reason the there's a bunch of line breaks randomly throughout the divs. I thought it may have been a problem with Cufon or IE.JS etc but I disabled all JS and it still bugs out.
Seems a bit long to post the code here, and I've thrown a bunch of unnecessary divs and clear fixes in but nothing seems to be working. I'll post and organize a proper report after I've figured it out.
Since some titles are longer than others, some line-break and thereby make the div taller. The floats will then "hang onto" these taller divs. It's not a bug per se, it's just how floating works.
--- --- ---
|1| |2| |3|
--- | | ---
--- ---
|4|
---
---
|5|
---
The best way to avoid this problem is to give each div a set height.
Alternatively, you can have the first div of each line "clear: left" by adding an appropriate class to each first/forth/seventh/etc div.
EDIT: To elaborate how this is floated: Each div tries to fit on the same line as the previous div, floating as far left as it can. If there's no space left on the line, it'll first be pushed down, then left. In the example above, 4 will be pushed down by 3, then it'll float left as far as it can, hitting 2. 5 is being pushed down by 4, then floats left as far as it can.
这篇关于CSS图片库浮动BUG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
