4-3 编程练习右边的广告用了fixed定位还是没有起到效果，为什么？

来源：4-3 编程练习

weibo_淡写丶甜甜的回溢_0

2018-01-06 20:19:51

div1和div2里面的宽和高不是应该是来设置图片的大小的吗，为什么对图片起不了作用，却能对图片的上下位置起作用？

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
      *{padding:0;margin:0;}
      .div{
            width:100%;
            height:4100px;
            background:url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) center top no-repeat;}
      /*左侧广告*/
      .div1{
            width:500px;
            height:250px;
            top:0;
            left:0;
            bottom:0;
            margin:auto 0;
            position:fixed;}
      /*右侧广告*/
      .div2{
            width:500px;
            height:250px;
            top:0;
            right:0;
            bottom:0;
            margin:auto 0;
            position:fixed;}
</style>
</head>
<body>
<div class="div">
    <div class="div1">
      <img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png"/>
    </div>
    <div class="div2">
      <img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png"/>
    </div>
</div>
</body>
</html>

写回答

2回答

好帮手慕糖

2018-01-08

你好，如下才是实现垂直居中哦。

top:0;
left:0;
bottom:0;
right: 0;
margin:auto auto;
position:fixed;

祝学习愉快~

好帮手慕糖

2018-01-07

你好，1、不是的，div1和div2里面的宽和高只是设置的是这两个盒子的宽高，如果要设置图片的宽高，应该设置给img哦。

2、这里fixed起作用了，只是因为设置给盒子了，但是盒子的宽度又太大了，所以是从盒子开始算的，这里把盒子的宽去掉，由子元素（即图片）撑开即可。

祝学习愉快~

heibo_淡写丶甜甜的回溢_0

h 恩恩，谢谢，还有一个问题就是不是说设置top:0;left:0;bottom:0;margin:auto 0;position:fixed就可以达到垂直居中的效果吗？

h018-01-07

共1条回复

0 学习 · 36712 问题

查看课程

相似问题

右边的广告用了fixed定位还是没有起到效果，为什么？

回答 2

4-3为什么蓝色广告在左边呢？

回答 1

为什么右边的广告快只显示了一半呢

回答 2

为什么right：-80px；红色块会紧贴蓝色块右边？

回答 2

浮动不起作用设置高度居中不起作用

回答 2

打开慕课网App查看更多内容