将元素放在页面底部

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 元素换到下一行？

- Rodrigo Fonseca

---

我甚至不知道该如何开始它... - Rodrigo Fonseca

是的，这个问题实际上是一个罕见的例外，我可以接受提问者不知道从哪里开始或没有太多展示。我甚至想不出一个好的谷歌搜索方法。但是，至少你需要JavaScript或其他服务器端语言来组织它们。 - patricksweeney

Answer 1

无法动态完成（至少不需要一些自定义JS）。如果您可以在包装div上使用固定宽度，则可以使用“nth-child”伪选择器强制选定数量的元素位于其余元素之上。但是需要删除“float”样式并更改为“display:inline-block”。

<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。

- rubo123

---

我测试了你的代码，但它只适用于6个div（或span），但如果我有更多呢？ - Rodrigo Fonseca

您需要使用nth-child选择器将要置于顶部的项目设置为'display:block;'，例如span:nth-child(2) { display:block; }。 - rubo123

Answer 2

这是我创建的一个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');
}

- Billy Jacobson

---

好的解决方案，我不想使用JavaScript，但我认为如果没有它将无法完成这个任务。 :( - Rodrigo Fonseca