我正在用具有特定宽度和高度的 div 填充 body。然后我得到这组框的宽度。我使用这个宽度通过 CSS ( margin: 0 auto ) 将这个组居中。我的问题是我总是得到一个额外的行，它没有相同数量的 div。
这是我的代码。
HTML:
<body>
<!-- Container-->
<div id="container_boxes" class="clearfix"></div>
</body>
CSS:
#container_boxes{
margin: 0 auto;
padding: 5px;
}
.box{
width: 250px;
height: 250px;
margin: 5px;
float: left;
box-shadow: 1px 1px 0px 0px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
}
.box:hover{
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.15);
}
JS:
$(document).ready(function(){
while( $(window).height() > $("#container_boxes").height() && $(window).width() > $("#container_boxes").width()) {
$("#container_boxes").append("<div class=\"box\"></div>");
}
colors= ['#bdc3c7', '#7f8c8d', '#95a5a6', '#2c3e50', '#34495e'];
$('.box').each(function(){
var rndmclr = colors[Math.floor(Math.random()*colors.length)];
$(this).css('background-color', rndmclr);
});
function boxesNumbers(){
var num_boxes = 0;
$('.box').each(function(){
if($(this).prev().length > 0){
if($(this).position().top != $(this).prev().position().top) return false;
num_boxes++;
} else {
num_boxes++;
}
});
$('#container_boxes').css('width', num_boxes*260);
};
boxesNumbers();
$(window).resize(boxesNumbers);
});
谢谢
最佳答案
好的，我想我明白你的意思了。这是我制作的工作 fiddle :http://jsfiddle.net/6NLjU/
除了你的代码，我还做了两件事。
1) 在容器 div 上添加了一个 clearfix，这样即使您 float 内部框，它也始终有一个高度。
#container_boxes:after {content:""; display:table; clear:both;}
2) while 循环结束后，移除最后一个框。这是因为循环不知道它已经超出了窗口大小，直到它添加了一个不适合的框然后发现容器太大。所以后来，我把那个不合适的盒子拿掉了。
$("#container_boxes .box:last-child").remove();
关于jquery - 用 div 填充容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19122423/