图片高度不统一， li style="float:left;"有的行只能显示一列

[YAFEIML]

像图片这样的情况，不用JS，单纯CSS有办法解决吗？

[ZzFoo]

给li设置一个固定的高度

[ihuguowei]

display:inline-block 试一试呢，PS：我未做验证

[belin520]

瀑布流

[kmvan]

这是一个经典问题。
特别是在响应式设计中，非常难解决。display:inline-block 明显不可行，无法精确计算间隔。
BUT，可以使用三列一个ul，这样就可以保证不会出现错位问题，但需要程序配合，同时也不支持响应式动态增减列数的问题。

bootstrap 的解决方法是用js来动态计算每列的元素并生成一个父容器来包含（不知道是不是bs的方法，我胡说的），这样可以解决响应式的情况但需要用到js，感觉也是十分蛋疼。

综上所述，既要不错位，又要不用js，而且还要兼容响应式，请盖上你的电脑，跟产品说一声，无解。

[sneezry]

为啥高度不统一？这是美工的问题

[jianghu52]

html菜鸟，说错了请轻喷。
我不知道楼主对于一行有什么特别需求。我遇到过一次这样的问题，后来跟客户协商就是每一行显示固定的张数。
以楼主的例子来看，假设一行显示3张。
我用的是傻办法。
一行3个div，每个div设置相同的height，img里面设置相同的min-height max-height，宽度用百分比表示。三个div的宽度，外带margin 加起来要100%。
我这么做下来之后，基本保证了整个页面的完整。但是部分图片的拉伸是避免不了的。

[kmvan]

ls两位，如果同一高度，那能叫响应式？

[jucelin]

瀑布流，http://ued.taobao.org/blog/2011/09/waterfall/
纯CSS，我无解

[sneezry]

@kmvan 响应式和高度无关啊。如果说是瀑布流，根本就没有行的概念，如果想整行整行地加载，那就让美工把图片做成一样高。如果图片高度不一致，就算整行载入了也不好看啊

[wsph123]

去掉li的 `float:left;` 试试 `display:inline-block;vertical-align:top;` 大法~

[YAFEIML]

@ZzFoo 这样看起来参差不齐
@kmvan bootstrap2有相关JS吗？
@sneezry 因为电脑海报不可能宽高比都一样的
@wsph123 这样跟LI加高度效果一样，参差不齐

[ihuguowei]

LZ，自己JS算很简单的，一点都不难的，我这种菜鸟都会。

[salemilk]

网站能去瞧瞧吗？想看电影啊.

[ryanyu104]

css3的话 column吧

[YAFEIML]

@ihuguowei 已经说了不用JS了，，，
@salemilk www.xdytt.com
@ryanyu104 兼容是问题

[xuhai951753]

img的width、height统一？

[YAFEIML]

@xuhai951753 图片宽高比不一样

[xuhai951753]

@YAFEIML 你最后想要的效果是宽度一致长度不一致类似瀑布流还是长宽一致。一般海报都是大概1.4:1的长宽比去做的。所以设置适合比例的固定长宽对海报的拉伸影响应该不会很大。

[YAFEIML]

@xuhai951753 想实现的是你说的第一种瀑布流，目前使用的是固定高度。