如何使右边浮动的div中的输入扩展到外部div的剩余空间

Question

请参阅：http://jsfiddle.net/h86Z3/

如何使右侧输入和/或其包装div扩展到id为"outer"的外部div的剩余空间？我需要通过保留嵌套的div结构

我试过了：

#right, #right input { width: auto }

和：

#right, #right input { width: 100%}

编辑对不起，我应该指定我确实不想给它指定的宽度！我希望它能适应外部div 的宽度变化

EDIT2不，上面的问题不能回答我的问题。正如我在最初的问题中所说，那里建议的应用于我的结构的更改不起作用。我的问题是关于嵌套的div，它包含具有固定宽度的外部div的输入。

Answer 1

将宽度应用于包含的div而不是输入，然后给输入100%的宽度。

#outer { width: 300px; height: 22px; border: 1px solid blue }
input {
    border: 1px solid red
    width:100%;
}
#left {
    width:30px;
    float:left;
}
#right {
    width:270px;
    float:right
}

Answer 2

假设您无法使用HTML5，您可以按照以下步骤进行操作：

左输入｛浮点：左；宽度：10%｝

右输入｛浮点：右；宽度：85%｝

如果你能使用HTML5，你可以考虑使用Flexbox，这在最初更容易掌握：

http://www.html5rocks.com/en/tutorials/flexbox/quick/

Answer 3

将它们向左浮动，并为右输入提供一个固定宽度，即减去填充和边界后剩余的空间

#outer { width: 300px; height: 22px; border: 1px solid blue; }
input { border: 1px solid red; }
#left { float: left; }
#right { float: left; }
#left input { width: 30px; }
#right input { width: 260px; }

Fiddle here：http://jsfiddle.net/Nillervision/eq4DL/

顺便说一句，你忘了把你的id和type属性放在HTML 的引号里

编辑：FIDDLE已更新以处理灵活的宽度参见下方的评论