<div> 在右下角显示不带位置的 a:绝对


:绝对。

我有一个像下面这样的<div>

<div style="right:0px;bottom:0px;position:absolute;">
</div>

当我的移动网站以纵向模式打开时,此div 会正确显示在右下角。 但是,当以横向模式打开时,它显示在角落并重叠已经存在的元素。

我希望这个div位于页面右下角所有元素的底部。我该怎么做?

我建议使用 flexbox - 但它可能需要重新组织一些你的 css 代码

.page {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
height:100vh;
}
.element {
height: 10px;
width: 80%;
border: 1px solid #000;
padding: 20px 0;
}
.element.bottom {
margin-top: auto;
background: red;
}
<div class="page">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
<div class="element bottom">
</div>
</div>

相关内容

  • 没有找到相关文章

最新更新