定位和居中问题

怎么让.y01右对齐,.y02左下角对齐。有没人法更改.gray宽度和高度时,y01与y02的位置始终在那个位置呢?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务四:定位和居中问题</title>
    <style type="text/css">body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .gray{
        width: 400px;
        height: 200px;
        background: #ccc;
        margin: 0 auto;
        position: relative;
        top:50%;
        transform: translateY(-50%);
    }
    .y01{
        background:#fc0;
        width: 50px;
        height: 50px;
        border-radius: 0 0 0 50px;
    }
    .y02{
        background:#fc0;
        width: 50px;
        height: 50px;
        border-radius: 0 50px 0 0;
        position: relative;
        left: 0px;
        bottom: -100px; 
    }
    </style>    
</head>
<body>
    <div class="gray">
        <div class="y01"></div>
        <div class="y02"></div> 
    </div> 
</body>
</html>
阅读 2.2k
3 个回答
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任务四:定位和居中问题</title>
    <style type="text/css">body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .gray{
        width: 400px;
        height: 200px;
        background: #ccc;
        margin: 0 auto;
        position: relative;
        top:50%;
        transform: translateY(-50%);
    }
    .y01{
        position:absolute;/*add*/
        background:#fc0;
        width: 50px;
        height: 50px;
        border-radius: 0 0 0 50px;
        right:0px;/*add*/
        top:0px;/*add*/
    }
    .y02{
        background:#fc0;
        width: 50px;
        height: 50px;
        border-radius: 0 50px 0 0;
        position: absolute;/*modify*/
        bottom: 0px; /*modify*/
        left:0px;/*add*/
    }
    </style>    
</head>
<body>
    <div class="gray">
        <div class="y01"></div>
        <div class="y02"></div> 
    </div> 
</body>
</html>

修改 .gray的宽度和高度,y01和y02都会在原来的位置。

.y01{
    background:#fc0;
    width: 50px;
    height: 50px;
    border-radius: 0 0 0 50px;
    float: right;
}
.y02{
    background: #fc0;
    width: 50px;
    height: 50px;
    border-radius: 0 50px 0 0;
    position: absolute;
    left: 0px;
    bottom: 0;
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题