右边的为什么不能贴边

来源:4-3 编程练习

慕莱坞8202083

2019-05-19 08:25:35

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>123</title>
<style type="text/css">
    *{padding:0px;
      margin:0px;   
    }
    .main{
        width:100%; 
        height:2000px;
        background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png)
        top left no-repeat   ;
       background-size:100%;
         }
    .fixed1{
        width:224px;
        height:364px;
        background:url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) no-repeat ;
        
        position:fixed ;
        top:50%;
        margin-top:-55px;
        left:0px;
        background-size:50%
    }    
    .fixed2{
        width:224px;
        height:364px;
        background:url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) no-repeat;
        position:fixed;
        right:0px;
        top:50%;
        margin:-55px;
        background-size:50%;
    }
    
</style>
</head>
<body>
<div class="main"> 
     <div class="fixed1">
         
     </div>
     <div class="fixed2">
         
     </div>
</div>

</body> 
</html>


写回答

1回答

好帮手慕夭夭

2019-05-19

你好同学,元素在父容器里面默认都是从左上角开始显示的。在代码中,父容器宽度比较大,内容铺不满所以右边会有剩余的空间,所以右边的图片不能紧贴在右边哦

http://img.mukewang.com/climg/5ce0d3650001859c02970422.jpghttp://img.mukewang.com/climg/5ce0d37900017aac02630477.jpg

解决方式就是设置背景图大小100%,让它完全铺满容器,参考如下:

http://img.mukewang.com/climg/5ce0d4340001ce1b09160258.jpg

祝学习愉快 ,望采纳。

0

0 学习 · 40143 问题

查看课程