如何实现一行显示多列记录，如合拍网的黄页那样错落有致的显示记录

问答首页 → 移动开发技术

0 0

如何实现一行显示多列记录，如合拍网的黄页那样错落有致的显示记录5

地址：http://hepaimusic.com/yellow_pages

想实现这样错落有致的显示记录，ror新人求教。

问题补充：

suziwen 写道

html+ css布局

能不能提供个简单的demo参考？

问题补充：找了个‘CSS多列布局问题简单解决方案’，研究下~

问题补充：CSS & ruby的in_groups_of方法已经解决

问题补充：

suziwen 写道

不好意思，忙了点，一直没再看你的回复了，搞定了？

分列是好了，但是还没有错落有致，每一行都等高的，我想做成这样： http://hepaimusic.com/yellow_pages

问题补充：恩，样式我看过了，那样好像有个问题，我用的group

%w(1 2 3 4 5 6 7).in_groups_of(3) {|group| p group}
["1", "2", "3"]
["4", "5", "6"]
["7", nil, nil]

想这样的group怎么获取其中的某一组？

suziwen 写道

其实你用DOM查看器就可以很清楚的知道他是怎么布局的

他其实就是三个大的DIV在一列，然后每个DIV里再放小的DIV用于存放一个介绍的

也就是<div align="left">
<div>人人物介绍1</div>
<div>人人物介绍4</div>
<div>人人物介绍7</div>

</div><div align="center"><div>人人物介绍2</div>
<div>人人物介绍5</div>
<div>人人物介绍8</div></div>
<div align="right"><div>人人物介绍3</div>
<div>人人物介绍6</div>
<div>人人物介绍9</div></div>

这样子就错落有致了
然后加上些CSS的美化，就跟你给的那个网站差不多了

问题补充：呵呵，补了下html和css，终于把样式搞定了，多谢你耐心指教啦！

suziwen 写道

没明白你这的意思

引用

恩，样式我看过了，那样好像有个问题，我用的group

%w(1 2 3 4 5 6 7).in_groups_of(3) {|group| p group}
["1", "2", "3"]
["4", "5", "6"]
["7", nil, nil]

想这样的group怎么获取其中的某一组？

Ruby