Question

我在父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？

Answer 1

你可以这样做：

.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;
}

Answer 2

如果你真的想要动态宽度（不仅仅是10px的情况），你就不能使用css。但您可以使用javascript动态设置宽度http://jsfiddle.net/jZBE6/19/

另一个div内的动态div宽度

2 个答案: