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