如何将浮动的div与较短的div分开放置在anoter下方 [英] How to float divs left with shorter divs one below anoter

问题描述

我有一个动态生成的div列表，代表选择各种选项的面板。有两种类型的div，普通的和短的。常规div的高度用javascript设置为最高的高度。此外，如果te short div的高度小于最大值的一半，则设置为该高度的一半，否则设置为全高。

什么我想现在要做的（最好用CSS）是以这样的方式列出这些项目，如果有足够的空间，将一个短div放在另一个排序div下。

<以下是一些插图，希望能够让事情变得更加清晰： 插图1>

p>

解决方案

没有通用纯CSS解决方案。

请参阅我的前面的回答，以便比较候选技术： com / questions / 5234749 / css-floating-divs-at-variable-heights / 5234858＃5234858> CSS浮动Div在变量高度

除非你可以使用服务器端代码手动计算像素并使用 position：relative / position：absolute;顶部：？px; left：？px ，你将不得不求助于JavaScript来处理定位。

这个jQuery插件通常是一个很好的解决方案： jQuery Masonry

还有一个原始的JavaScript版本： 香草砌体

p>

我发现自己有时会推荐它：

https://stackoverflow.com/search?q=user%3A405015+masonry

一些可能相关的演示：

• http://desandro.com/demo/masonry/docs/filtering.html


• http：// desandro。 com / demo / masonry / docs / animating-jquery.html


• http://desandro.com/demo/masonry/docs/appending.html

I have a list of dynamically generated divs that represent panels for selecting various options. There are two types of divs, regular ones and short ones. The height of the regular divs is set with javascript to te height of the tallest one. Additionally, if the height of te short div is less than half of the maximum it is set to half of that height, otherwise it is set to the full height.

What I would want to do now (preferably with CSS) is to list those items in such a way that if there is enough space, to put one short div below another sort div.

Here are some illustrations to hopefully make things clearer:

解决方案

There is no generic pure CSS solution.

See a previous answer of mine for a comparison of the candidate techniques:

• CSS Floating Divs At Variable Heights

Unless you can use server-side code to manually calculate pixels and use position: relative / position: absolute; top: ?px; left: ?px, you will have to resort to JavaScript to handle the positioning.

This jQuery plugin is generally a good solution: jQuery Masonry

There's also a raw JavaScript version: Vanilla Masonry

I find myself recommending it somewhat regularly:

https://stackoverflow.com/search?q=user%3A405015+masonry

Some possibly relevant demos:

• http://desandro.com/demo/masonry/docs/filtering.html
• http://desandro.com/demo/masonry/docs/animating-jquery.html
• http://desandro.com/demo/masonry/docs/appending.html

这篇关于如何将浮动的div与较短的div分开放置在anoter下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！