html - 将元素放在页面底部

Question

下面的红色元素是我的 div，黑色的大矩形是用户在浏览器(窗口)中看到的，我认为图像是不言自明的，这是产生当前结果的 html 和 css:

<div class="wrapper">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS:

.wrapper{
  position: absolute;
  bottom: 10px;
  left: 0;
  width: auto;
  height: auto;
}

.wrapper div{
  float: left;
  margin: 5px;
  border: 1px solid red;
  width: 200px;
  height: 80px;
}

我需要更改或添加什么以确保大部分 div 转到下一个行？

Answer 1

这是我创建的执行此操作的 JSFiddle 的链接:http://jsfiddle.net/WE2Gj/

我使用 jQuery 来动态更改每行上的元素数量，始终允许顶部的元素数量最少:

$(document).ready(function(){
    adjustWidths();
});

$(window).resize(function() {
    adjustWidths();
});

function adjustWidths() {
    cWidth = $('.child').width();
    numDivs = Math.floor($(window).width() / cWidth);
    $('.child').removeClass('clear');
    $('.child:nth-last-child('+numDivs+'n)').addClass('clear');
}