右边区块没有固定,会变小

右边区块没有固定,会变小

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
    *{padding:0; margin:0;}
    body{min-width:700px;}
    .head,.footer{
      width:100%;
      height:40px;
      float:left;
      line-height:40px;
      text-align:center;
      background:#e4e4e4;
    }   
    .body{
      padding:0px 220px 0px 200px;
    }
    .middle{
      width:100%;
      background:blue;

    }
    .left{
      width:200px;
      background:green;
      margin-left:-100%;
      left:-200px;
    }
    .right{
      width:220px;
      background:red;
      margin-left:-220px;
      right:-220px;
    }
    .left,.middle,.right{
      float:left;  
      position:relative;
      min-height:300px;
    }
 
  </style>
</head>
<body>
  <div class="head">
    <p>我是头</p>
  </div>
  <div class="body">
    <div class="middle">
      <p>我是内容的中间</p>
    </div>
    <div class="left">
      <p>我是内容的左边</p>
    </div>
    <div class="right">
      <p>我是内容的右边</p>
    </div>
  </div>
  <div class="footer">
    <p>我是尾巴</p>
  </div>
</body>
</html>

正在回答

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

2回答

所说情况,当缩小到一定程度,在继续缩小红色区变小并在网页内不可见吧!

小丸子爱吃菜 2018-01-11 10:39:51

没有问题啊,页面放到最小,右侧宽度还是220px啊

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

祝学习愉快!

  • 就是缩小窗口,左右的div本来是固定的,但是越缩小,右边的红色区块就会变小,你试一下~
    2018-01-11 15:49:35
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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