在一个父容器内包含三个子容器,设置效果为左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化。
<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了。这是为何?