水平排列元素的底部对齐

最新推荐文章于 2023-08-08 10:19:30 发布

benoxo

最新推荐文章于 2023-08-08 10:19:30 发布

阅读量1.7w

点赞数 3

分类专栏： web前端笔记文章标签： html 结构 css

本文链接：https://blog.csdn.net/dotmai/article/details/52345721

版权

web前端笔记专栏收录该内容

7 篇文章 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>

benoxo

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
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
复制链接

扫一扫

专栏目录