水平排列元素的底部对齐

原创 2016年08月28日 14:59:52

最终运行结果
运行结果
HTML结构

<div class="parent">
    <div class="child" style="height: 200px; width:50px; background-color: red;">red</div>
    <div class="child" style="height: 140px; width:50px; background-color: blue;">blue</div>
    <div class="child" style="height: 100px; width:50px; background-color: yellow;">yellow</div>
    <div class="child" style="height: 180px; width:50px; background-color: green;">green</div>
</div>

这里的parent和child高度未知

1. absolute + bottom

首先想到的是用absolute定位来做,但这不是一个好方法原因基于两点:
- 绝对定位之后子元素脱离文档流会相互覆盖,需要对每个子元素指定不同的left或者margin
- 由于子元素脱离文档流,父元素高度会收缩,导致看不到完整的子元素。解决方法是给父元素指定宽度或者对子元素指定一个负的bottom,而且这个高度或者bottom要至少等于最高子元素。但是子元素高度并不知道,所以这不是个好方法。

    .parent {
        position: relative;
        /*height: 200px;*/
    }
    .child {
        position: absolute;
        bottom: -200px;  // 不指定此属性会导致子元素只有底部部分可见
        width: 50px;
    }

2. vertical-align + inline-block

指定子元素为内联块元素,然后指定他们的垂直对齐方式

.child {
    display: inline-block;
    vertical-align: bottom;
}

vertical-align不同于text-align,是指定自身相对于父元素的垂直对齐方式
这种方式简单而且只在子元素上设置样式即可,兼容性也非常好

3. flex + align-items

在父元素上设置

.parent {
    display: flex;
    align-items: flex-end;
}

这种方式也非常简单,只需在父元素上设置样式,但是兼容性不好

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*第二种*/
        .child {
            display: inline-block;
            vertical-align: bottom;
        }

        /*第三种*/
        /*.parent {
            display: flex;
            align-items: flex-end;
        }*/
    </style>
</head>
<body>
    <div class="parent">
        <div class="child" style="height: 200px; width:50px; background-color: red;">red</div>
        <div class="child" style="height: 140px; width:50px; background-color: blue;">blue</div>
        <div class="child" style="height: 100px; width:50px; background-color: yellow;">yellow</div>
        <div class="child" style="height: 180px; width:50px; background-color: green;">green</div>
    </div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

CSS3 Flex实现元素的水平居中和垂直居中

网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,赶上新技...

绝对定位元素的水平垂直居中

转自张鑫旭大神博客,原文地址:http://www.zhangxinxu.com/wordpress/?p=3794 二、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,...
  • timnnx
  • timnnx
  • 2017年04月18日 22:55
  • 87

CSS里的各种水平垂直居中基础写法心得分享(附内联元素,块级元素的基本概念)

http://www.w3school.com.cn/htmldom/prop_style_verticalalign.asp(W3C标准,概念不清的看手册很重要哦)       首先,依旧是概念...
  • Jt1123
  • Jt1123
  • 2013年12月27日 09:26
  • 1922

CSS3 Flexbox轻巧实现元素的水平居中和垂直居中

CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Fle...
  • bjstyle
  • bjstyle
  • 2017年06月14日 14:36
  • 307

margin:auto实现绝对定位元素的水平垂直居中

magin

CSS3 Flexbox轻巧实现元素的水平居中和垂直居中

CSS3 Flexbox轻巧实现元素的水平居中和垂直居中

元素的水平居中总结

1.行内元素:这个比较简单,一般使用text-align:center就可。 Document #div1{ text-alig...

margin:auto实现绝对定位元素的水平垂直居中(粘贴过来的)

小tip: margin:auto实现绝对定位元素的水平垂直居中 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www....

CSRF、AMD和水平垂直居中元素的方法

最近参加了携程前端工程师的笔试,有一些知识点比较重要,在这里记录一下。 CSRF和XSSCSRF(Cross-site Request forgery),即跨站请求伪造。之前了解到一个比较相似的概念X...

利用CSS进行元素的水平居中

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...
  • lmm1217
  • lmm1217
  • 2016年12月20日 11:40
  • 971
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:水平排列元素的底部对齐
举报原因:
原因补充:

(最多只允许输入30个字)