CSS高级Div定位。自动排列到网格

如果您只想用CSS来实现这一点,那么代码应该是这样的:

#div {
  clear:both;
  width:500px
}
.img {
   display:block;
   width:150px;
   height: 50px;
   float:left;
}

就我所记得的,就这样。。 祝你好运!

只需使用div的css width属性就可以实现所有这些

#div {
width:500px;
}

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158

在这里,你也可以在网格视图和普通视图之间切换,我们所要做的就是使用div宽度

http://www.allposters.com/-st/Animal-Posters_c622_.htm

<ul> 在一个 <span> ,每个图像都在 <li> . 然后当你调整窗口大小时,图像会从一个 <ul>

因此,使用jQuery:

blocksPerRow = Math.floor($('#container').width() / blockWidth);

$('.row ul').each(function () {
  while ($(this).children('li').size() > blocksPerRow)
    ($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
  while ($(this).children('li').size() < blocksPerRow)
    ($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});

我想应该是这样。添加到 $(window).resize() 以及 document ready