Question

我正在构建在线编辑器，我想知道是否可以根据<div>状态div的数量来调整display: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

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

Answer 2

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

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

2 个答案: