Home Sign Up Sign In
Exin

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

  •   
  •   Exin · Jun 20, 2015 · 4199 views
    This topic created in 4154 days ago, the information mentioned may be changed or developed.
    有一固定尺寸的div，里面有多个img，想实现img都紧贴div底部的效果。
    如果是单个img，我知道可以将div的position设置为relative，img的position设置为absolute,bottom=0进行对齐。但是当div内有多个img时这样会使得img重叠在div底部同一位置。
    又因为position已经是absolute的缘故，不能通过float等属性自动将其排列开。
    img数量较多，挨个设置位置比较繁琐。
    求简单有效的底部对齐方法。
    Supplement 1  ·  Jun 20, 2015
    大家的方法总而言之都是在div里再套一个div，将这个div至于底部，然后将img至于内层div内。感谢各位！
  • img
  • div
  • 底部
    14 replies  •  2015-06-20 12:41:27 +08:00
    Twinkle
    Twinkle
    Jun 20, 2015
    1
    flexbox 不过兼容性不好
    Exin
    Exin
    OP
    Jun 20, 2015
    2
    @Twinkle 最好支持Chrome……
    yangg
    yangg
    Jun 20, 2015 via iPhone
    3
    你还没放假没
    Exin
    Exin
    OP
    Jun 20, 2015
    4
    @yangg what？
    banri
    banri
    Jun 20, 2015
    5
    vertical-align: bottom
    Daniel65536
    Daniel65536
    Jun 20, 2015 via iPad❤️1
    6
    vertical-alian bottom
    display inline
    Exin
    Exin
    OP
    Jun 20, 2015
    7
    @banri
    @Daniel65536
    vertical-align是最先尝试的方法，没用啊……
    banri
    banri
    Jun 20, 2015❤️1
    8
    @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
    Exin
    OP
    Jun 20, 2015
    9
    @banri 除了vertical-align还需要两个display属性的设置，我在去掉你给出的任意一个display就不行了呢
    banri
    banri
    Jun 20, 2015❤️1
    10
    @Exin 嗯 -w- 是的
    这个方法也可以用来进行不定高度的绝对居中 -w-
    yangg
    yangg
    Jun 20, 2015❤️1
    11
    也可以absolute啊，里面加个元素就可以了 http://codepen.io/yangg/pen/vOedVN?editors=110
    sneezry
    sneezry
    Jun 20, 2015 via iPhone❤️1
    12
    img外层再给个div，这个div底部对齐，里面的img在正常的流里。
    biggun
    biggun
    Jun 20, 2015 via iPhone
    13
    可不可以bottom : 0 然後用n-th children的方法加margin呢
    Exin
    Exin
    OP
    Jun 20, 2015
    14
    @biggun 不错的想法欸，我试了试，似乎参数里的n无法用在内部使用
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2976 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 35ms · UTC 11:55 · PVG 19:55 · LAX 03:55 · JFK 06:55
    ♥ Do have faith in what you're doing.