我需要制作如下图所示的模板:
我成功对齐了顶部方 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"> </div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"> </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"> </div>
<div class="main_cont">Content Here</div>
<div class="red_bottom"> </div>
</div>关于html - 如何对齐底部 block ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46826714/