将元素放在页面底部

Question

下面的红色元素是我的div，大黑色矩形是用户在浏览器（窗口）看到的，我认为图像是不言自明的，这是产生当前结果的html和css：< / p>

<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

无法动态完成（至少没有一些自定义JS）。如果你可以在包装div上有一个固定的宽度，那么你可以使用'nth-child'伪选择器强制选定数量的元素位于元素的其余部分之上。但它确实需要删除'float'样式并更改为'display：inline-block'

<强> HTML

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

<强> CSS

div {
    position:absolute;
    bottom:0;
    vertical-align:bottom;
    display:table-cell;
    width:500px;
}
span {
    display:inline-block;
    width:100px;
    height:30px;
    border:1px solid red;
    border-radius:10px
}
span:nth-child(1) {
    display:block;
}

以下是fiddle

Answer 2

这是我创建的JSFiddle的链接：http://jsfiddle.net/WE2Gj/

我使用jQuery来动态地改变每行上有多少元素，总是允许top拥有最少量的元素：

$(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');
}