html - 显示 flex,在其容器的右下角对齐一个 div
问题描述
我需要在其红色容器“内容”的右下角显示黄色 div“图标”。
我的脚本有什么问题?
.root {
display: inline-flex;
background-color: red;
}
.content {
display: flex;
align-items: centerl;
justify-content: centerl;
height: 80px;
width: 100%;
background-color: red;
}
.icon {
position: absolute;
right: 0;
bottom:0;
background-color: yellow;
}
<div class="root">
<div class="content">
content
</div>
<div class="icon">
icon
</div>
</div>
解决方案
您可以使用 flex end 属性来代替位置align-self: flex-end;
见下面的代码片段:
.root {
display: inline-flex;
background-color: red;
}
.content {
display: flex;
align-items: center;
justify-content: center;
height: 80px;
width: 100%;
background-color: red;
}
.icon {
align-self: flex-end;
background-color: yellow;
}
<div class="root">
<div class="content">
content
</div>
<div class="icon">
icon
</div>
</div>
推荐阅读
- c++11 - 有没有办法从另一个函数访问 main 中的变量?
- ios - 用户位置 MKAnnotationView 在 iOS 10、11、12 中相对于其他注解的显示顺序
- jmeter - 如何将 __evalVar 函数值保存到变量中并重新使用它进行比较
- r - 数据表输出的错误代码:参数不可解释为逻辑
- sql - SQL 查找至少放映过 2 次的电影
- android - 如何将 1800 秒格式化为 MM:SS 格式
- apache-spark - pyspark to_timestamp 函数不会转换某些时间戳
- php - 如何将重力表单条目数据发送到 aspx 第三方 url
- assembly - 关于 MIPS 中 beq 的数据危害和转发?
- php - 如何在 Visual Studio 中将我的 HTML/JS/PHP 项目构建为渐进式 Web 应用程序?