我需要在其红色容器“内容”的右下角显示黄色的 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>
关于html - 显示 flex,在其容器的右下角对齐一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52829486/