javascript - div 根据连续 div 的数量调整大小

Question

我目前正在构建一个在线编辑器，我想知道是否可以根据未处于状态<div>的 s 的数量调整 a 的大小。divdisplay:none

例如，我有一行三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%。

Answer 1

如果你的 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);

Answer 2

你可以只用 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;}