使子div的寬度以與父母相同的速度增長

我有一個帶有多個嵌套div的div。所有的div div都是float：left，所以它們都在同一行。父div「newDistractor」的寬度爲100％，因此它的父級增長也是如此。所有的子節點都有固定的寬度20px。我希望div「distractorText」以與父代相同的速度增長，因此它佔據了所有空白空間。任何想法如何做到這一點。使子div的寬度以與父母相同的速度增長

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

來源

2010-11-10 Scott Chantry

這可以工作。它實際上並沒有調整distractorTextdiv，但它可能是你需要的東西：

<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：look now

來源

2010-11-10 20:55:52 cambraca

你可以使用jQuery的.resize()，然後每次都指望孩子<div> S的數量，將其劃分到當前的寬度，並相應設置。

來源

2010-11-10 20:51:11

我還沒有嘗試過這種權利，但是如果您將類「distractorText」的寬度設置爲100%，則應該考慮問題......或其他「可接受的」百分比（可能爲50）。

來源

2010-11-10 20:52:18 warren

不是;與浮動元素，這將無法正常工作。 – palswim 2010-11-10 20:53:06

@palswim良好的捕獲 - 錯過了他們正在漂浮 – warren 2010-11-10 20:59:20

對於此示例具體而言，您可以使用邊距而不是浮動 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>

來源

2010-11-10 20:54:19 palswim

所有的宗教十字軍放在一邊，下面的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>

來源

2010-11-10 20:59:07 Mic

使子div的寬度以與父母相同的速度增長

回答

相關問題