请参阅http://lrin.tk/float_problem.htm。
以下是我的网页的样子：
+-----------------------+ +---------------------------+ +--------------+
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |::::::::::::::|
+-----------------------+ |___________________________| +--------------+
|___________________________|
|___________________________|
|___________________________|
[2] |___________________________| [1]
|___________________________|
|___________________________|
+---------------------------+
+--------------+ +------------+ +----------+ +---------------------+
|**************| |````````````| |==========| |"""""""""""""""""""""|
|**************| |````````````| |==========| |"""""""""""""""""""""|
[3]|**************| |````````````| |==========| |"""""""""""""""""""""|
|**************| |````````````| |==========| |"""""""""""""""""""""|
|**************| |````````````| |==========| |"""""""""""""""""""""|
+--------------+ +------------+ +----------+ +---------------------+
+---------------------------+
|{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|{{{{{{{{{{{{{{{{{{{{{{{{{{{|
+---------------------------+
所有div s'高度都固定为某个值。在HTML文件中，200px。
实际上，___________ - 条纹div在右上方是固定的（不是CSS-ually position:fixed）。
当窗口重新调整大小（阈值为20px）时，会调用reArrange函数。
现在代码只是简单地改变div s，所以不灵活的浏览器只留下区域＃1和区域＃2为空，更不用说区域＃3的一小部分了。
然而div被排列，我希望它适合一行的大部分区域
这意味着，只有当当前行没有空间来容纳任何（实际上是“最窄的”）的无序div时，才会启动新行/强>
所以在这个例子中，理想的结果应该是：
+--------------+ +--------------+ +---------------------------+ +------------+
|::::::::::::::| |**************| |___________________________| |````````````|
|::::::::::::::| |**************| |___________________________| |````````````|
|::::::::::::::| |**************| |___________________________| |````````````|
|::::::::::::::| |**************| |___________________________| |````````````|
|::::::::::::::| |**************| |___________________________| |````````````|
+--------------+ +--------------+ |___________________________| +------------+
+-----------------------+ |___________________________| +----------+
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |==========|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |==========|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |==========|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |==========|
|]]]]]]]]]]]]]]]]]]]]]]]| |___________________________| |==========|
+-----------------------+ +---------------------------+ +----------+
+---------------------+ +---------------------------+
|"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{|
|"""""""""""""""""""""| |{{{{{{{{{{{{{{{{{{{{{{{{{{{|
+---------------------+ |{{{{{{{{{{{{{{{{{{{{{{{{{{{|
+---------------------------+
对我来说，看起来像是一些“动态编程”或“复发”就可以了。但是，我只是一名高中生，没有编程方面的专家。
这有可能吗？
答案 0 :(得分：0)
我不确定你是否可以让它更轻量级或自定义它，但Isotope有很多选择。
JQuery Isotope - http://isotope.metafizzy.co/
另外请务必阅读有助于调试您可能遇到的任何问题的帮助 - http://isotope.metafizzy.co/docs/help.html
您还可以在Github上阅读有关插件的更多信息 - https://github.com/desandro/isotope - 您也可以从这里下载缩小版的代码。
还有另一个插件，它被合并到同位素中使用的一个布局mdo中。 JQuery Masonry - http://masonry.desandro.com/。砌体允许您通过垂直而不是水平排列和对齐浮动元素来插入布局中的空白区域。