老师为什么我右边的显示不对？
来源：4-3 编程练习
wsc6016922
2020-04-01 13:02:33
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.continer{
width: 100%;
height: 4033px;
}
.left{
width: 50px;
height: 100px;
position: fixed;
left: 0;
top: 50%;
margin-top: -50px;
}
.right{
width: 50px;
height: 100px;
position: fixed;
right: 0px;
top: 50%;
margin-top: -50px;
}
</style>
</head>
<body>
<div class="continer">
<img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">
<div class="left">
<img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png">
</div>
<div class="right">
<img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png">
</div>
</div>
</body>
</html>
1回答
-
同学你好，页面中的问题如下：
1. 页面出现滚动条，如图：
原因图片宽度超出父容器。建议设置图片宽度为100%，父容器高度由图片撑开；参考如下：
2.同学的代码是将左右两侧装图片的父元素垂直居中了（图中黑色的框），而图片的宽高和父元素是不同的，所以图片没有垂直居中，并且出现了下面的现象：
建议将图片的父元素宽高设置成和图片一致，参考如下：
3.建议使用通配符选择器去除html元素的默认边距，参考如下：
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
1
相似问题