Question

在我的身体里，我想要两个并排内容的div，每个div的宽度为屏幕的50％。但我希望能够隐藏/显示第一个div然后第二个divs宽度响应这个将它的宽度改为100％或50％。根据是否隐藏第一个div来填充身体或身体的其他部分。

任何想法如何做到这一点？（我知道如何使用jquery显示/隐藏，我正在考虑HTML）

Answer 1

仅对第一个元素使用浮动，而让第二个元素适合剩余空间。

然后，如果元素与width:50%可见，则第二个将填充另一半。但如果第一个被隐藏，第二个将填满整个屏幕。

HTML：

<input type="button" id="btn" value="toggle" />
<div id="wrapper">
    <div id="left">Foo</div>
    <div id="right">Bar</div>
</div>

CSS：

#wrapper, #right {
    overflow: hidden;
}
#left {
    float: left;
    width: 50%;
    background-color: #ffa;
}
#right {
    background-color: #faf;
}
.hide {
    display: none;
}

JS：

var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
    left.className = left.className ? '' : 'hide';
};

Answer 2

另一种可能性：使用display: table-cell。这比浮动更有优势，两列的高度相同，设置包装的高度也会为两列设置。

Demo

HTML：

<input type="button" id="btn" value="toggle" />
<div id="wrapper">
    <div id="left">Foo</div>
    <div id="right">Bar</div>
</div>

CSS：

#wrapper {
    display: table;
    width: 100%;
}
#left, #right {
    display: table-cell;
}
#left {
    background-color: #ffa;
}
#right {
    background-color: #faf;
}
.hide {
    display: none !important;
}

JS：

var left = document.getElementById('left');
document.getElementById('btn').onclick = function() {
    left.className = left.className ? '' : 'hide';
};

Div的宽度调整是否隐藏了另一个div？

2 个答案: