浮动DIV额外空间填充 [英] Floating DIV Extra Space Fillup

问题描述

我有这些浮动DIV框，在其中工作完美。 ：）

但是当文本扩展时，我遇到了这个float问题。

如何填充那些破坏我的设计的丑陋空间？

解决方案

发生这种情况是因为浮动元素脱离正常的HTML文档流程，并且当某些元素高于其兄弟姐妹时默认为此行为。 p>

解决这个问题的一种方法是使用固定高度元素。如果它们都具有相同的高度，则不会发生此问题。然而，这并不总是实用的，特别是对于动态内容。

另一个解决方案是使用JavaScript。请查看 Masonry jQuery插件;它可以做你需要的。

I have these floating DIV boxes in which works perfectly. :)

but when the text extends more, I encounter this float problem.

How do I fill that ugly space thats' ruining my design?

解决方案

This happens because floated elements fall out of the normal HTML document flow and default to this behaviour when some elements are taller than their siblings.

One way to solve this is to have fixed height elements. If they all have the same height this issue will not occur. This is not always practical, however, especially with dynamic content.

Another solution is to use JavaScript. Take a look at the Masonry jQuery plugin; it can do what you need.

这篇关于浮动DIV额外空间填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！