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

您可以使用jQuery的.resize()，然后每次计算子<div>的数量，将其除以当前宽度，并相应地设置。

Answer 2

具体来说，对于此示例，您可以使用边距而不是浮动  div元素。

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

Answer 3

这可行。它实际上并没有调整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

Answer 4

我没有尝试过这种权利，但如果你将“distractorText”类的宽度设置为100%，它应该处理问题...或其他一些“可接受的”百分比（也许50）。

Answer 5

所有宗教十字军都放在一边，下面的HTML会做你需要的^ L ^：

<table class="newDistractor" style="width:100%">
    <td style="width:20px">a</td>
    <td style="width:20px">b</td>
    <td class="distractorText" style="width:100%">Enter text to add option.</td>
    <td style="width:20px">c</td>
    <td style="width:20px">d</td>
    <td style="clear:left;margin-bottom:-43px;">e</td>
</table>

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

5 个答案: