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

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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title></title>

<style>

    *{

        margin:0;

        padding:0;

    }

    .back{

        width:100%;
        height:1000px;

    }

    .left{position:fixed;

      float:right;

            top:50%;

            margin-top:-180px;

    }

    .right{

        position:fixed;

      float:left;

            top:50%;

            margin-top:-180px;

    }

</style>

</head>

<body>

<div class="back">

    <img src="http://img1.sycdn.imooc.com/climg//59c9f7ce0001839219034033.png"/>

</div>

<div class="left">

    <img src="http://img1.sycdn.imooc.com/climg//5a3383d00001a3dd02240364.png"/>

</div>

<div class="right">

    <img src="http://img1.sycdn.imooc.com/climg//5a3383c70001f1b702240364.png"/>

</div>

</body>

</html

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

绝对定位或固定定位和浮动一起使用的话,会使浮动失效,定位有自己控制位置的方向属性,建议规范使用

怎么都被占用了呢 2018-03-01 10:12:51

首先你得给放图片的容器定义一个宽高,否则会宽度100%显示,定位也就没有意义了。其次定义了定位之后,在左右显示,设置left或者right就可以了,不用浮动了

http://img1.sycdn.imooc.com//climg/5a9761a0000191f304840481.jpg

  • 提问者 qq_咸鱼_54 #1
    练习要求里图片不是全有的,打上定位之后高度就不起作用。right和left设置为0是可以但是为什么浮动不能用啊
    2018-03-01 17:52:48
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师