V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Exin
V2EX  ›  前端开发

div 内 img 批量底部对齐的方法?

  •  
  •   Exin · 2015-06-20 00:23:30 +08:00 · 3259 次点击
    这是一个创建于 3443 天前的主题,其中的信息可能已经有所发展或是发生改变。
    有一固定尺寸的div,里面有多个img,想实现img都紧贴div底部的效果。
    如果是单个img,我知道可以将div的position设置为relative,img的position设置为absolute,bottom=0进行对齐。但是当div内有多个img时这样会使得img重叠在div底部同一位置。
    又因为position已经是absolute的缘故,不能通过float等属性自动将其排列开。
    img数量较多,挨个设置位置比较繁琐。
    求简单有效的底部对齐方法。
    第 1 条附言  ·  2015-06-20 11:51:43 +08:00
    大家的方法总而言之都是在div里再套一个div,将这个div至于底部,然后将img至于内层div内。感谢各位!
    14 条回复    2015-06-20 12:41:27 +08:00
    Twinkle
        1
    Twinkle  
       2015-06-20 00:37:02 +08:00
    flexbox 不过兼容性不好
    Exin
        2
    Exin  
    OP
       2015-06-20 00:41:03 +08:00
    @Twinkle 最好支持Chrome……
    yangg
        3
    yangg  
       2015-06-20 00:47:07 +08:00 via iPhone
    你还没放假没
    Exin
        4
    Exin  
    OP
       2015-06-20 00:50:53 +08:00
    @yangg what?
    banri
        5
    banri  
       2015-06-20 00:51:18 +08:00
    vertical-align: bottom
    Daniel65536
        6
    Daniel65536  
       2015-06-20 00:53:44 +08:00 via iPad   ❤️ 1
    vertical-alian bottom
    display inline
    Exin
        7
    Exin  
    OP
       2015-06-20 00:58:13 +08:00
    @banri
    @Daniel65536
    vertical-align是最先尝试的方法,没用啊……
    banri
        8
    banri  
       2015-06-20 01:08:29 +08:00   ❤️ 1
    @Exin 可以的

    ``
    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
    .out {
    width: 800px;
    height: 800px;
    display: table;
    }

    .in {
    display: table-cell;
    vertical-align: bottom;
    }
    </style>
    </head>
    <body>
    <div class="out">
    <div class="in">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    <img src="http://tp2.sinaimg.cn/3908411377/180/5726748662/1">
    </div>
    </div>
    </body>
    </html>

    ``
    Exin
        9
    Exin  
    OP
       2015-06-20 01:21:03 +08:00
    @banri 除了vertical-align还需要两个display属性的设置,我在去掉你给出的任意一个display就不行了呢
    banri
        10
    banri  
       2015-06-20 01:26:18 +08:00   ❤️ 1
    @Exin 嗯 -w- 是的
    这个方法也可以用来进行不定高度的绝对居中 -w-
    yangg
        11
    yangg  
       2015-06-20 08:59:27 +08:00   ❤️ 1
    也可以absolute啊,里面加个元素就可以了 http://codepen.io/yangg/pen/vOedVN?editors=110
    sneezry
        12
    sneezry  
       2015-06-20 11:46:13 +08:00 via iPhone   ❤️ 1
    img外层再给个div,这个div底部对齐,里面的img在正常的流里。
    biggun
        13
    biggun  
       2015-06-20 12:18:45 +08:00 via iPhone
    可不可以bottom : 0 然後用n-th children的方法加margin呢
    Exin
        14
    Exin  
    OP
       2015-06-20 12:41:27 +08:00
    @biggun 不错的想法欸,我试了试,似乎参数里的n无法用在内部使用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3620 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:21 · PVG 18:21 · LAX 02:21 · JFK 05:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.