Question

因为我可以在里面有一个带有两个孩子的div，其中一个没有显示（display：none）而另一个占用了父亲的整个空间，但当我告诉javascript显示隐藏的其他autoredimensiones到太空离开而不使用javascript？

HTML：

<div class="parent">
    <div class="child1" id="id1">
    </div>
    <div class="child2">
    </div>
</div>

的CSS：

.parent {
    height: 200px;
    background-color: red; 
}
.child2 {
    height: 100%;
    background-color: blue;
}
.child1 {
    display:none;
    height: 50px;
    background-color: green;
}

的javascript：

var myDiv = document.getElementById('id1');
myDiv.style.display="block";

Answer 1

使用纯CSS无法实现这一点，但如果您可以添加更多JavaScript（为了添加类名），那么可以实现：

修订版JavaScript：

var myDiv = document.getElementById('id1');
myDiv.style.display = "block";
myDiv.className += ' nowShown';

附加CSS：

.child1.nowShown {
    float: left;
    width: 50%;
}

.child1.nowShown + .child2 {
    display: inline-block;
    width: 50%;
}

JS Fiddle proof-of-concept

否则，这是不可能的，因为CSS缺乏确定元素的视觉/ display状态的能力。如果它有一个:visible伪类，那么它是可能的，但如果没有这样的话，就像目前一样，很遗憾没有。

采用上述概念验证来实现略微简洁的切换：

function showDiv1() {
    var myDiv = document.getElementById('id1'),
        cN = myDiv.className;
    myDiv.style.display = "block";

    if (cN.match(/nowShown/)){
        myDiv.className = cN.replace(/nowShown/,'');
        myDiv.style.display = 'none';
    }
    else {
        myDiv.className += ' nowShown';
    }
    nC = myDiv.className;
    myDiv.className = nC.replace(/\s{2,}/,' ');
}

document.getElementsByTagName('button')[0].onclick = function(){
    showDiv1();
};

JS Fiddle demo

动态高度使用css自动调整大小

1 个答案: