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

我有一个动态的图片库中显示，使用PHP ...CSS高级分区定位。自动排列到网格

我PROB

alt text 风格&定位应该是，如果没有一整足够的空间格，如上面的图像，然后在该行中的DIV应该放置它们像下面

alt text 居中并等距遥远...

here is JS-Fiddle基本模板集，如果有人想尝试的jsfiddle

东西

来源

2010-11-12 Moon

我不认为这是可以单独使用CSS。 – casablanca 2010-11-12 16:10:24

确定没有CSS单独然后如何 – Moon 2010-11-12 16:32:26

@casablanca你可以纯粹做到这一点与CSS – kobe 2010-11-12 16:46:09

就可以实现这一切仅仅用CSS width属性的DIV

#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

来源

2010-11-12 16:09:34 kobe

这不是OP想要的。你的例子总是只有3张图像，但OP希望基于浏览器宽度调整图像的数量。 – casablanca 2010-11-12 17:44:35

使用window.width或document.width我们可以计算这些东西 – kobe 2010-11-12 17:50:20

我们没有像'float：justify'这样的东西:) – Moon 2010-11-12 17:57:36

谷歌与他们的图片搜索有同样的问题......他们不得不用花哨的脚本来克服它。查看源代码，每行图像在<span>内部为<ul>，每个图像都在<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事件。

来源

2010-11-12 16:18:13

如果你想只用CSS来实现这一目标，该代码会像这样：

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

至于我记得，就是这样.. 祝你好运！

来源

2012-02-15 19:38:53 cristian

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

回答

相关问题