javascript - 使子 div 的宽度以与父 div 相同的速率增长

Question

我有一个包含多个嵌套 div 的 div。所有子 div 都是 float:left 所以它们都在同一行。父 div“newDistractor”的宽度为 100%，因此随着它的父元素的增长，它也会如此。所有子节点的宽度都固定为 20px。我希望 div“distractorText”以与其父级相同的速度增长，以便它占据所有空白空间。任何想法如何去做。

<div class="newDistractor">
    <div style="width:20px">&nbsp;</div>
    <div style="width:20px">&nbsp;</div>
    <div class="distractorText">Enter text to add option.</div>
    <div style="width:20px">&nbsp;</div>
    <div style="width:20px">&nbsp;</div>
    <div style="clear:left;margin-bottom:-43px;">&nbsp;</div>
</div>

Answer 1

这可行。它实际上并没有调整 distractorText div 的大小，但它可能是您需要的:

<div class="newDistractor">
    <div class="left">&nbsp;</div>
    <div class="left">&nbsp;</div>
    <div class="right">&nbsp;</div>
    <div class="right">&nbsp;</div>
    <div class="distractorText">Enter text to add option.</div>
    <div style="clear:left;margin-bottom:-43px;">&nbsp;</div>
</div>

它的 CSS 基本上是:

.left { float: left; }
.right { float: right; }

看看实际效果 here

编辑 我稍微清理了一下 jsfiddle:看 now