gpt4 book ai didi

html - 如何对齐底部 block ?

转载 作者:太空宇宙 更新时间:2023-11-03 19:39:30 25 4
gpt4 key购买 nike

我需要制作如下图所示的模板:

Template 2 do

我成功对齐了顶部方 block ,但未能对齐底部方 block - 无法将其移动到左下角。

代码是:

 <style>
.red_top {
background-color:red;
position:absolute;
width:65px;
height:65px;
z-index:-1;
}
.red_bottom {
align:right;
verical-align:bottom;
background-color:red;
position:relative;
width:65px;
height:65px;
z-index:-1;
top:-35px;}
.main_cont
{
border:1px solid blue;
margin-top:25px;
margin-left:25px;
min-height:100px;
z-index:1;
background-color:#FFF;
}
</style>
<body style="margin: 60px 50px;">
<div style="width:100%; border:1px solid #000;">
<div class="red_top">&nbsp;</div>
<div class="main_cont">Content Here</div>
<div class="red_bottom">&nbsp;</div>
</div>

https://codepen.io/anon/pen/OxavGL

我需要做什么才能正确放置 red_bottom div?

最佳答案

    .red_top {
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
}
.red_bottom {
background-color: red;
position: absolute;
width: 65px;
height: 65px;
z-index: -1;
bottom: 0;
right: 0;
}
.main_cont {
border: 1px solid blue;
margin: 25px;
min-height: 100px;
z-index: 1;
background-color: #FFF;
}
    <div style="width: 100%; border: 1px solid #aaa; position: relative;">
<div class="red_top">&nbsp;</div>
<div class="main_cont">Content Here</div>
<div class="red_bottom">&nbsp;</div>
</div>

关于html - 如何对齐底部 block ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46826714/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com