bigcupwater
bigcupwater
2017-03-02 09:35

<div>宽度设置为100%,设置属性margin-left和margin-right时出现问题。

  • css
  • 浏览器
  • html5
  • 前端

在一个父容器内包含三个子容器,设置效果为左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化。

     <div id="A3">
        <div id="DIV-A2"></div>
        <div id="DIV-C2"></div>
        <div id="DIV-B2"></div>
    </div>

 #A3{
    margin-top:10px;
}

#DIV-A2{
    width:50px;
    background-color:red;   
    height:30px;
    float:left;/*设置浮也已经脱离文档流*/
}

#DIV-C2{
    width:50px;
    background-color:red;   
    height:30px;
    float:right;/*设置浮也已经脱离文档流*/
}

#DIV-B2{
    background-color:blue;
    width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/
    height:30px;
}

图片说明

设置margin-left后变成这个样子,本想着把margin-right设置出来应该就会恢复原样。

图片说明

但发现这时候的margin-right的值无论多大都没有作用。

图片说明

注释掉left单独设置right,中间区域恢复原样,但是margin-right的值任然不起作用。
单独写了个demo发现在宽度设置为百分比的时候margin-right的值不会起作用,

 <div id="A4"></div>

#A4{
    margin-top:10px;
    background-color:blue;
    width:100%;/*设置百分比可实现宽度随浏览器窗口变化而变化*/
    height:30px;
    margin-right:200px;
}

图片说明

由上图可见右边距没有发生任何变化,此时margin-right的值已经到200px了。这是为何?

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

4条回答

为你推荐

换一换