css - float div 中输入元素的填充宽度

Question

我正在尝试使用 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>

如何让 Bbbbbb 像 Ddddddd 和 Ffffff 一样占据其 div 右侧的所有空间？

这是我期待的:

Answer 1

From this answer:我只是将输入包装在一个带有 overflow: hidden 样式的 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;}
.filler {overflow: hidden; padding-right: 4px;}

HTML:

<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>

This is it. The perfect result!