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

html - 如何对齐底块?-LMLPHP

我成功地获得了顶部正方形,但未能成功分配底部正方形-无法将其移至左下角。

代码是:

 <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 - 如何对齐底块?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/46826714/

10-13 00:20
查看更多