V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
YAFEIML
V2EX  ›  问与答

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

  •  
  •   YAFEIML · 2015-01-02 11:45:16 +08:00 · 4072 次点击
    这是一个创建于 3602 天前的主题,其中的信息可能已经有所发展或是发生改变。
    像图片这样的情况,不用JS,单纯CSS有办法解决吗?
    
    19 条回复    2015-01-02 20:16:13 +08:00
    ZzFoo
        1
    ZzFoo  
       2015-01-02 11:51:35 +08:00
    给li设置一个固定的高度
    ihuguowei
        2
    ihuguowei  
       2015-01-02 11:52:29 +08:00
    display:inline-block 试一试呢,PS:我未做验证
    belin520
        3
    belin520  
       2015-01-02 12:00:03 +08:00 via Android
    瀑布流
    kmvan
        4
    kmvan  
       2015-01-02 12:03:50 +08:00
    这是一个经典问题。
    特别是在响应式设计中,非常难解决。display:inline-block 明显不可行,无法精确计算间隔。
    BUT,可以使用三列一个ul,这样就可以保证不会出现错位问题,但需要程序配合,同时也不支持响应式动态增减列数的问题。

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

    综上所述,既要不错位,又要不用js,而且还要兼容响应式,请盖上你的电脑,跟产品说一声,无解。
    sneezry
        5
    sneezry  
       2015-01-02 12:15:25 +08:00 via iPhone
    为啥高度不统一?这是美工的问题
    jianghu52
        6
    jianghu52  
       2015-01-02 12:25:13 +08:00
    html菜鸟,说错了请轻喷。
    我不知道楼主对于一行有什么特别需求。我遇到过一次这样的问题,后来跟客户协商就是每一行显示固定的张数。
    以楼主的例子来看,假设一行显示3张。
    我用的是傻办法。
    一行3个div,每个div设置相同的height,img里面设置相同的min-height max-height,宽度用百分比表示。三个div的宽度,外带margin 加起来要100%。
    我这么做下来之后,基本保证了整个页面的完整。但是部分图片的拉伸是避免不了的。
    kmvan
        7
    kmvan  
       2015-01-02 12:27:44 +08:00
    ls两位,如果同一高度,那能叫响应式?
    jucelin
        8
    jucelin  
       2015-01-02 12:43:24 +08:00
    瀑布流,http://ued.taobao.org/blog/2011/09/waterfall/
    纯CSS,我无解
    sneezry
        9
    sneezry  
       2015-01-02 13:18:55 +08:00 via iPhone
    @kmvan 响应式和高度无关啊。如果说是瀑布流,根本就没有行的概念,如果想整行整行地加载,那就让美工把图片做成一样高。如果图片高度不一致,就算整行载入了也不好看啊
    wsph123
        10
    wsph123  
       2015-01-02 13:57:54 +08:00
    去掉li的 `float:left;` 试试 `display:inline-block;vertical-align:top;` 大法~
    YAFEIML
        11
    YAFEIML  
    OP
       2015-01-02 14:14:08 +08:00
    @ZzFoo 这样看起来参差不齐
    @kmvan bootstrap2有相关JS吗?
    @sneezry 因为电脑海报不可能宽高比都一样的
    @wsph123 这样跟LI加高度效果一样,参差不齐
    ihuguowei
        12
    ihuguowei  
       2015-01-02 14:18:14 +08:00
    LZ,自己JS算很简单的,一点都不难的,我这种菜鸟都会。
    salemilk
        13
    salemilk  
       2015-01-02 14:20:16 +08:00 via iPhone
    网站能去瞧瞧吗?想看电影啊.
    ryanyu104
        14
    ryanyu104  
       2015-01-02 14:33:50 +08:00
    css3的话 column吧
    YAFEIML
        15
    YAFEIML  
    OP
       2015-01-02 16:40:45 +08:00
    @ihuguowei 已经说了不用JS了,,,
    @salemilk www.xdytt.com
    @ryanyu104 兼容是问题
    xuhai951753
        16
    xuhai951753  
       2015-01-02 19:50:51 +08:00
    img的width、height统一?
    YAFEIML
        17
    YAFEIML  
    OP
       2015-01-02 19:59:40 +08:00
    @xuhai951753 图片宽高比不一样
    xuhai951753
        18
    xuhai951753  
       2015-01-02 20:12:26 +08:00
    @YAFEIML 你最后想要的效果是宽度一致长度不一致类似瀑布流还是长宽一致。一般海报都是大概1.4:1的长宽比去做的。所以设置适合比例的固定长宽对海报的拉伸影响应该不会很大。
    YAFEIML
        19
    YAFEIML  
    OP
       2015-01-02 20:16:13 +08:00
    @xuhai951753 想实现的是你说的第一种瀑布流,目前使用的是固定高度。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1053 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:55 · PVG 03:55 · LAX 11:55 · JFK 14:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.