I'm trying to get uneven columns
I'm trying to get dynamic columns to fill in all the space so it doesn't act like a table and is more liquid.
I'm creating boxes from left to right, and when they float left to a new column, I'd like them to move up and fill the empty space. Is that possible?
In the following code I'd like the box containing lines 8 and 9 to be directly under the box with line 1 without the vertical space. The boxes are dynamic so I don't know how many lines will be within each box.
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float</title>
<style>
.b1 {
width:300px;
border: thin solid #C30;
margin:0;
padding:0;
}
.b2 {
margin:0;
padding:0;
border: thin solid #00F;
float:left;
}
.line {
list-style-type: none;
width:90px;
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="b1">
<div class="b2">
<li class="line">line 1</li>
</div>
<div class="b2">
<li class="line">line 2</li>
<li class="line">line 3</li>
<li class="line">line 4</li>
</div>
<div class="b2">
<li class="line">line 5</li>
<li class="line">line 6</li>
</div>
<div class="b2">
<li class="line">line 7</li>
</div>
<div clas开发者_Python百科s="b2">
<li class="line">line 8</li>
<li class="line">line 9</li>
</div>
</div>
</body></html>
This effect can be achieved with a little JavaScript/jQuery:
var coords = new Array();
var i = 0;
$('.b2').each(function()
{
var t = this.offsetTop;
var l = this.offsetLeft;
var w = this.offsetWidth;
var h = this.offsetHeight;
var arr = new Object({'t': t, 'l': l, 'w': w, 'h': h});
coords.push(arr);
if (i > 0)
{
for (var j=0; j<i; j++)
{
if (coords[j].l == l)
{
var ofs = t - (coords[j].t + coords[j].h);
this.style.marginTop = '-'+ofs+'px';
}
}
}
i++;
});
加载中,请稍侯......
精彩评论