Css 浮动div内输入元素的填充宽度

我正在尝试使用float在容器中组织一个宽度为40%-30%-30%的div的水平布局

在每个div中，我想插入纯文本，然后是一个输入字段，该字段将填充其div的水平其余部分

作为问题的简化再现，只需在CSS上使用以下内容：

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
.cb {clear: both;}

这是关于HTML的：

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <input class="b" value="Bbbbbb" />
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>

AAAAA:
中交：
Dddddd
EEEE：
Ffffff

如何使Bbbbbb像Dddddd和ffffffff一样占据其div右侧的所有空间

这就是我所期待的：

---

如果未为输入声明size属性，则其默认大小为20，但即使该大小在不同的浏览器中呈现也不同

一种解决方案是使用JQuery计算您为输入留出的空间，然后动态添加CSS以修改输入的宽度

---

缺点是输入将首先以默认宽度呈现，然后调整大小，这可能会导致布局“起舞”。为此，您可以使用display:none隐藏输入，并仅在调整大小后显示。

如果未为输入声明size属性，则其默认大小为20，但即使该大小在不同浏览器中呈现也不同

一种解决方案是使用JQuery计算您为输入留出的空间，然后动态添加CSS以修改输入的宽度

---

缺点是输入将首先以默认宽度呈现，然后调整大小，这可能会导致布局“起舞”。为此，您可以使用display:none隐藏输入，并仅在调整大小后显示。

在标记中，将输入包装在div中

您仍然必须检查一些关于您的第一个粉红色div（由输入推动）高度的示意图 看小提琴

固定了高度差

使用以下规则修改边框和高度属性

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

---

Finel fiddle

在标记中，将输入包装在div中

您仍然必须检查一些关于您的第一个粉红色div（由输入推动）高度的示意图 看小提琴

固定了高度差

使用以下规则修改边框和高度属性

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

Finel fiddle

我刚刚将输入包装在一个div中，其样式为

溢出：隐藏

CSS:

HTML:

AAAAA:
中交：
Dddddd
EEEE：
Ffffff

我刚刚将输入包装在一个div中，样式为

overflow:hidden

CSS:

HTML:

AAAAA:
中交：
Dddddd
EEEE：
Ffffff

---

我不明白你在找什么。你能简单地描述一下你所期望的吗？旁白：一个去样式化的无序列表是一个比div更好的容器。标签标签比DIV更适合于文本指示符。jsFiddle:@ignaciorici我知道，您的代码已经做到了这一点。但是aaa，ccc，eee将是一个较长的多行文本，对吗？如果你漂浮的东西没有宽度，你就不能“填满”空间。我不明白你在找什么。你能简单地描述一下你所期望的吗？旁白：一个去样式化的无序列表是一个比div更好的容器。标签标签比DIV更适合于文本指示符。jsFiddle:@ignaciorici我知道，您的代码已经做到了这一点。但是aaa，ccc，eee将是一个较长的多行文本，对吗？如果你漂浮的东西没有宽度，你就不能“填满”空间。这几乎解决了它！问题是，若你们仔细观察，BBBB的字段现在通过CCCC:。我还是要从中减去AAAA:“的宽度，不知怎么的。我不确定你现在在说什么。不管怎样，我给自己修好了高差的装饰，你可以在这把小提琴上看到。这几乎解决了它！问题是，若你们仔细观察，BBBB的字段现在通过CCCC:。我还是要从中减去AAAA:“的宽度，不知怎么的。我不确定你现在在说什么。不管怎样，我给自己修好了高差的装饰，你可以在这把小提琴上看到。

input {
    display:block;
    width :100%; 
    border:none;
    height:18px;

}

.r {background-color: pink;}
.g {background-color: lightgreen;}
.b {background-color: lightblue;}
.w40 {width: 40%;}
.w30 {width: 30%;}
.w100 {width: 100%;}
.fl {float: left;}
.filler {overflow: hidden; padding-right: 4px;}

<div class="r w40 fl">
    <div class="g fl">Aaaaaa:</div>
    <div class="filler"><input class="b w100" value="Bbbbbb" /></div>
</div>
<div class="r w30 fl">
    <div class="g fl">Cccccc:</div>
    <div class="b">Dddddd</div>
</div>
<div class="r w30 fl">
    <div class="g fl">Eeeeee:</div>
    <div class="b">Ffffff</div>
</div>