右侧部分,我使用的是 float:right;才可以实现效果

右侧部分,我使用的是 float:right;才可以实现效果

老师您好。  教程中left、middle、right都是 float:left; 但是我的代码这样设置的话,右侧块的位置不对,我把right的float设置为right即可显示出正确的效果,请问下是什么原因哦,谢谢!

我的代码如下:


<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    .* {

        margin:0;padding:0;

    }

    

    body {

      min-width: 700px;

    }


    .container {

        padding:0 220px 0 200px;

    }

    .left,.middle,.right {

        position:relative;

        float:left;

        min-height:300px;

    }

    .middle {

        background-color:blue;

        width:100%;

    }

    .left {

        background-color:red;

        width:200px;

        margin-left:-100%;

        left:-200px;

    }

    

    .right {

        background-color:green;

        width:220px;

        margin-left:-100%;

        float: right;

        /*right:-220px;*/

    }

    

    

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div class="container">

  <div class="middle">我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的我是中间的</div>

  <div class="left">我是左边的</div>

  <div class="right">我是右边的</div>

  </div>

</body>

</html>


正在回答

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

2回答
.right {
    background-color:green;
    width:220px;
    margin-left: -220px;
    right: -220px;
}

right这样设置可以解决

  • Horrace 提问者 #1
    哦哦 收到,谢谢老师。。我写的 margin-left:-100%,这个100% 是container的宽度,所以距离container右边很远,因此实现的效果不对,是这样的么老师。。另外 如果像我上面设置的 右浮动的方法解决这个问题有木有什么弊端哦?
    2017-07-11 11:26:56
小丸子爱吃菜 2017-07-11 16:10:06

设置有浮动也可以,那么右侧的right值就得设置成220px。

代码的思路只要没问题就可以,至于怎么样,能实现圣杯布局的特点就可以。

祝学习愉快!

  • 提问者 Horrace #1
    收到,谢谢老师
    2017-07-12 15:20:17
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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