How to float divs left with shorter divs one below anoter
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开发者_JS百科 make things clearer:
As far as I can see, this is not possible purely with CSS: If you provide the small boxes with clear: left, they will appear below all others. If you don't, they will appear next to each other.
The simplest workaround I can think of is to manually group two small boxes into a separate div. Here's a working example:
<html>
<head>
<style type="text/css">
div.large, div.small { width: 40px; margin: 5px; }
div.large { height: 95px; background-color: blue; }
div.small { height: 45px; background-color: red; }
div.large, div.smallblock { float: left; }
</style>
</head>
<body>
<div class="large">1</div>
<div class="large">2</div>
<div class="smallblock">
<div class="small">3</div>
<div class="small">4</div>
</div>
<div class="smallblock">
<div class="small">5</div>
<div class="small">6</div>
</div>
<div class="large">7</div>
</body>
</html>
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
加载中,请稍侯......
精彩评论