像图片这样的情况，不用JS，单纯CSS有办法解决吗？
This topic created in 4162 days ago, the information mentioned may be changed or developed.
 |
1
ZzFoo Jan 2, 2015
给li设置一个固定的高度
|
 |
2
ihuguowei Jan 2, 2015
display:inline-block 试一试呢，PS：我未做验证
|
 |
3
icanfork Jan 2, 2015 via Android
瀑布流
|
 |
4
kmvan Jan 2, 2015
这是一个经典问题。
特别是在响应式设计中，非常难解决。display:inline-block 明显不可行，无法精确计算间隔。 BUT，可以使用三列一个ul，这样就可以保证不会出现错位问题，但需要程序配合，同时也不支持响应式动态增减列数的问题。 bootstrap 的解决方法是用js来动态计算每列的元素并生成一个父容器来包含（不知道是不是bs的方法，我胡说的），这样可以解决响应式的情况但需要用到js，感觉也是十分蛋疼。 综上所述，既要不错位，又要不用js，而且还要兼容响应式，请盖上你的电脑，跟产品说一声，无解。 |
 |
5
sneezry Jan 2, 2015 via iPhone
为啥高度不统一？这是美工的问题
|
 |
6
jianghu52 Jan 2, 2015
html菜鸟，说错了请轻喷。
我不知道楼主对于一行有什么特别需求。我遇到过一次这样的问题，后来跟客户协商就是每一行显示固定的张数。 以楼主的例子来看，假设一行显示3张。 我用的是傻办法。 一行3个div，每个div设置相同的height，img里面设置相同的min-height max-height，宽度用百分比表示。三个div的宽度，外带margin 加起来要100%。 我这么做下来之后，基本保证了整个页面的完整。但是部分图片的拉伸是避免不了的。 |
|
7
kmvan Jan 2, 2015
ls两位，如果同一高度，那能叫响应式？
|
 |
8
jucelin Jan 2, 2015
瀑布流，http://ued.taobao.org/blog/2011/09/waterfall/
纯CSS，我无解 |
|
9
sneezry Jan 2, 2015 via iPhone
@kmvan 响应式和高度无关啊。如果说是瀑布流，根本就没有行的概念，如果想整行整行地加载，那就让美工把图片做成一样高。如果图片高度不一致，就算整行载入了也不好看啊
|
 |
10
wsph123 Jan 2, 2015
去掉li的 `float:left;` 试试 `display:inline-block;vertical-align:top;` 大法~
|
 |
11
YAFEIML OP |
|
12
ihuguowei Jan 2, 2015
LZ，自己JS算很简单的，一点都不难的，我这种菜鸟都会。
|
 |
13
salemilk Jan 2, 2015 via iPhone
网站能去瞧瞧吗？想看电影啊.
|
 |
14
ryanyu104 Jan 2, 2015
css3的话 column吧
|
|
15
YAFEIML OP |
 |
16
xuhai951753 Jan 2, 2015
img的width、height统一？
|
|
17
YAFEIML OP @xuhai951753 图片宽高比不一样
|
|
18
xuhai951753 Jan 2, 2015
@YAFEIML 你最后想要的效果是宽度一致长度不一致类似瀑布流还是长宽一致。一般海报都是大概1.4:1的长宽比去做的。所以设置适合比例的固定长宽对海报的拉伸影响应该不会很大。
|
|
19
YAFEIML OP @xuhai951753 想实现的是你说的第一种瀑布流，目前使用的是固定高度。
|
Select Language