CSS定位4-3编程练习

来源:4-3 编程练习

soso_crazy

2018-07-26 21:17:15

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style>
   .left{position:fixed;
         left:0;
         top:100px;
   }
        
   .right{position:fixed;
         right:0;
         top:100px;
   }
</style>
</head>
<body>
<div><img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png"/></div>

<div class="left">
    <img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"/>
</div>

<div class="right">
    <img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"/>
</div>
</body>
</html>

这样就符合题目要求了吗?

写回答

1回答

好帮手慕星星

2018-07-27

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

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

1、水平方向上出现了横向滚动条,是因为页面本身存在空白处,可以清除body的内外边距,参考:

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

2、左右两侧的图片并没有垂直居中显示,可以设置top定位为50%,然后再设置一半高度的负值(margin-top),参考:

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

自己测试完善下,祝学习愉快~~

0

0 学习 · 36712 问题

查看课程