html – 将元素放在页面底部

2023年3月20日 296次阅读

下面的红色元素是我的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转到下一行？

最佳答案 这是我创建的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');
}
点赞