DIV根據申報單的一排

我目前正在建立一個在線編輯器的數量調整，我想知道是否有可能根據div s表示不在一個display:none狀態的數量調整大小<div>。DIV根據申報單的一排

例如，我有一行有三個div列，每個列都是32％，我希望如果一個在display:none狀態，其他兩個將會是48％大。

所以我的代碼是在html：

<input type="checkbox" onclick="showHide('.text1')" checked="" /> 
<input type="checkbox" onclick="showHide('.text2')" checked="" /> 
<input type="checkbox" onclick="showHide('.text3')" checked="" /> 

<div id="line1"> 
    <div id="text1"></div> 
    <div id="text2"></div> 
    <div id="text3"></div> 
</div>

，並在JavaScript中只有這個使用jQuery：

function showHide(divId) 
{$(divId).slideToggle('slow');}

我要的是，當我取消任何的文字，另外兩個從33％降到50％，如果另一個從50％降到100％。

來源

2013-05-29 Lou

如果y你可以通過JavaScript顯示和隱藏'div'，很容易計算剩餘的可見div並對它們應用寬度。請發佈您的代碼以獲得更具體的答案。 – freejosh

我正在使用jquery來顯示和隱藏div，但我不知道該如何去計算剩餘的div，其顯示不是none。 – Lou

如果你的HTML是這樣的：

<div class="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

已套用display值後，您可以使用:visible來找出有多少元素是可見的，並根據該元素應用寬度：

// select visible children 
var visibleDivs = $('.container div:visible'); 

// use whatever width calculation you'd like... 
var targetWidth = 100/visibleDivs.length - 1; 

// apply the width to the divs 
visibleDivs.width(targetWidth);

來源

2013-05-29 14:05:02 freejosh

知府！工作真棒！非常感謝！ – Lou

你可以只用CSS，在這裏做到這一點，

<div class="container"> 
<span>test</span><span>test2</span><span>test3</span></div> 



.container { 
display: table; 
width: 100%;} 
.container > span { 
display: table-cell; 
width: auto; 
text-align: center;}

來源

2013-05-29 13:52:02

DIV根據申報單的一排

回答

相關問題