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

Question

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

     <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了。这是为何？

Answer 1

你的子元素已经100%宽了，和父元素一样宽，还怎么调margin-left、margin-right