bigcupwater
2017-03-02 09:35<div>宽度设置为100%,设置属性margin-left和margin-right时出现问题。
在一个父容器内包含三个子容器,设置效果为左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化。
<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条回答
为你推荐
- 我的错误消息格式化为我左侧的错误消息
- html
- margin
- error-handling
- php
- css
- 1个回答
- 页脚停留在<div>的右侧
- css
- html
- php
- 3个回答
- 如何将此PHP打印的HTML表单设置为保留在<p>标记内?
- css
- html
- forms
- php
- tags
- 3个回答
- CSS Div%宽度问题
- css
- layout
- width
- php
- 2个回答
- 为什么我的<a>内容不对齐
- css
- 2个回答
换一换