如何解决另一个div内部的动态div宽度
| 我在父div内有2个内联div:.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
问题是div2
继承了parent
div的宽度而不是剩余宽度(即190px),最终div2最终低于div1。
这是使用jsfiddle的示例:http://jsfiddle.net/jZBE6/
如何在不设置静态宽度的情况下使div2的宽度为190px?
解决方法
您可以这样进行:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
您也可以在不浮动正确的div的情况下做到这一点(这是我希望的方式):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
, 如果确实需要动态宽度(不只是10px大小写),则不能使用CSS。但是您可以使用javascript动态设置宽度http://jsfiddle.net/jZBE6/19/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。