A Compressed Version of float: left
I have what seems like a simple problem, but i have yet to find a solution. I have a series of divs which may vary in height, thought they will generally be the same width. I would like a fluid layout that basically ends up generating a variable number of columns as the page is resized. Perfect for float left. The problem is that when the divs are different heights, there ends up being a lot of white space vertically between the elements.
Clearly, the simple solution is to write some javascript to do all of this for me. But i would hate to have to resort to that if there's a css solution.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Float Example</title>
<style type="text/css">
.dv { border: solid 1px red; float: left; width: 300px; }
</style>
</head>
<body>
<div>
<div style="height: 40px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
<div style="height: 60px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
</div>
</body>
</html>
You'll see that when the page is very narrow, everything looks as you would expect. All of the divs stack up. If you expand the page to full size, yet again - everything looks fine. But when there are 2 or 3 columns, look how much extra space there is. I'd post an image, but my reputation does not yet permit me to do so.
Anyway, i experimented with various display and position settings, and i c开发者_如何学Couldn't get it to really do what i want.
Any suggestions? Thanks!
-RP
Are you after this type of look?
http://desandro.com/resources/jquery-masonry/
If so, no, there is no easy way to handle that with pure CSS. You need a bit of JS as well.
There is no particularly good way to generically handle this with CSS.
Read this previous answer I wrote that goes over the various options, and shows that they don't work:
CSS Floating Divs At Variable Heights
You're stuck with JavaScript. Fortunately, the JavaScript you need has already been written in the form of a jQuery plugin:
jQuery Masonry
I've suggested the same thing before:
- Position floated elements directly under each other
- css alignment question
加载中,请稍侯......
精彩评论