关闭

水平排列元素的底部对齐

标签: html结构css
85人阅读 评论(0) 收藏 举报
分类:

最终运行结果
运行结果
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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3318次
    • 积分:159
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章存档