另一个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/