html自动换行布局会乱,HTML列布局 - 自动换行DIV元素下一列

固定它

我使用了一些JavaScript和位置绝对计算的布局，你想让它动态地

$(function() {

// Handler for .ready() called.

var rows = 5

var items = $("#container").children()

var firstDiv = $("#container").children().eq(0)

var height = firstDiv.height()

var margin_bottom = firstDiv.outerHeight(true) - firstDiv.innerHeight()

var margin_right = firstDiv.outerWidth(true) - firstDiv.innerWidth()

var row = 0

var index = 0

items.each(function() {

var leftPos = 0

if (index >= rows) {

var siblingDiv = $("#container").children().eq(index-rows)

if (index == 10) {

}

leftPos = siblingDiv.width() + siblingDiv.position().left + margin_right

}

var topPos = ((height + margin_bottom) * row)

$(this).css('top', topPos + 'px')

$(this).css('left', leftPos + 'px')

row += 1

index += 1

if (row >= rows) {

row = 0

}

})

});

#container {

background-color:gray;

position:relative;

top: 10px;

left:0px;

height:500px;

}

.item {

background-color:green;

position:absolute;

height:50px;

top: 0px;

left:0px;

margin-right:10px;

margin-bottom:10px;

}