水平排列元素的底部对齐

原创 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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

html中ul元素水平排列问题

#pic_list { display:block; white-space:nowrap; width:500px; overflow:auto; } #pic_list li { width:80...
  • cs408
  • cs408
  • 2015年11月14日 23:03
  • 2510

理解两个元素垂直居中对齐

在慕课网跟着企业网站实例进行练习,logo区的电话图标和后面的电话号码对齐用了一个vertical-align:middle,前段时间练习没有见过。 查了W3C是这样解释的: vertical-a...
  • mtdyxsplzm
  • mtdyxsplzm
  • 2016年08月05日 10:19
  • 954

android控件的对齐方式(转)

android:layout_above 将该控件的底部至于给定ID的控件之上 android:layout_below 将该控件的顶部至于给定ID的控件之下 android:layout_toL...
  • luxiaoyu_sdc
  • luxiaoyu_sdc
  • 2013年09月10日 10:58
  • 21209

弹性盒布局-----指定水平方向与垂直方向上的对齐方式

首先介绍弹性盒布局中的一些术语的意思 main-axis:进行布局时作为布局基准的轴,在横向布局时为水平轴,在纵向布局时为垂直轴 main-start/main-end:进行布局时的起点和...
  • qq_36748278
  • qq_36748278
  • 2017年01月04日 16:41
  • 2548

flex布局:常用属性及文字图片对齐试验

图片和文字的中线对齐一直是一个头疼的问题。之前一直用flex布局做垂直居中对齐,但是从来没有认真研究过。 flex布局的兼容性: 我在ios和几款android手机上测试了一下可以兼容。 ...
  • yhyclelo
  • yhyclelo
  • 2017年07月28日 16:42
  • 1762

li的水平排列问题

涅槃总是痛苦的,什么都得重新开始。 最近在开始转前端,学习css。在li水平排列时遇到了几个问题,把解决方法记录下来。什么不多说,开始上代码。 li水平排列 html{ fo...
  • angeljsl
  • angeljsl
  • 2015年08月17日 16:28
  • 1789

Android LinearLayout 子控件底部对齐

android:baselineAligned="false"
  • yan15826900142
  • yan15826900142
  • 2013年08月13日 10:23
  • 3480

flex布局篇(一)

flex布局是一种十分强大的布局方式,使用它可以轻松完成绝大部分的网页布局工作,可以说,只要掌握了flex布局,你就可以在布局中游刃有余了。...
  • zhou_xiao_cheng
  • zhou_xiao_cheng
  • 2016年10月22日 21:06
  • 791

DIV六种实现元素水平居中

居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。早期总结了一下互联网上有关于水平垂直居中的几种实现...
  • xxdddail
  • xxdddail
  • 2016年06月22日 16:35
  • 5344

让lebel和radio/checkbox水平对齐

label, input { vertical-align: middle; }
  • linminqin
  • linminqin
  • 2014年06月10日 11:00
  • 1508
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:水平排列元素的底部对齐
举报原因:
原因补充:

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