Question

我正在尝试从以下HTML中创建input及其容器div以获取剩余的可用宽度（fiddle provided）：

<div id="container">
    <div id="information">
        <div id="leftcontainer"><lable>Field name:</lable></div>
        <div id="rightcontainer">
            <div id="action">A</div>
            <div id="textdiv">
                <input type="text" style="width:100%;" value="something"/>
            </div>
        </div>
    </div>
    <div id="additional">Additional info</div>
</div>

CSS的相关部分：

#container, #information, #additional{
    width:600px;
}

#leftcontainer{
    float: left;
    width: 30%;    
    display:inline-block;
    position: absolute;
    top: 5%;    
}

#rightcontainer{
    float:right;
    width:67%;
    display:inline-block;
}

#action{
    float:right;
    width:40px;
    height:40px;
    text-align:center;
}

#textdiv {
    width:100%;
    height:100%;
}

这不能正常工作，因为输入幻灯片位于#action div下并占据了其父级的67％。我查看并尝试了here和here所述的解决方案，但结果没有改善。在这种情况下，如何让input占用可用宽度？（关于如何“修复”label的一些指示，虽然不是强制性的，但我们非常感激。）

Answer 1

通过替换你的风格来试试这个

#container, #information, #additional {
width: 600px;
float: left;
}

#leftcontainer {
float: left;
width: 21%;
display: inline-block;
position: absolute;
top: 5%;
}

#textdiv {
width: 89%;
height: 100%;
}

Answer 2

在小提琴中做了一些改变，这就是你想要的http://jsfiddle.net/sGg7M/4/

低于css更改

#leftcontainer{
    float: left;
    width: 30%;   
}

#rightcontainer{
    margin-left: 30%;
}

编辑：做了一些小的结构更改和更多编辑css也删除了边框 http://jsfiddle.net/sGg7M/5/

使div和输入文本占用剩余空间不起作用

2 个答案: