一个div里有两个div并排显示,一个宽度40%,一个宽度60%,这两个div可以显示也可以隐藏,当一个div隐藏另一个div显示时,显示的div宽度占100%
时间: 2024-09-24 12:03:53 浏览: 29
要在HTML和CSS中实现这样的布局,你可以创建一个包含两个`<div>`标签的容器,并利用Flexbox或者Grid布局。这里我们以Flexbox为例:
首先,在HTML中设置两个子`div`:
```html
<div class="container">
<div class="child one">宽度40%</div>
<div class="child two">宽度60%</div>
</div>
```
然后,给`.container`添加Flexbox样式,使其成为弹性容器:
```css
.container {
display: flex;
flex-direction: row; /* 或者 justify-content: space-between; 如果需要间隔 */
}
.child {
flex: 0 0 auto; /* 确保每个子元素有固定的宽度 */
}
```
对于动态显示与隐藏,你可以通过JavaScript或者CSS伪类来控制。例如,如果你想让`.child.one`隐藏时`.child.two`显示并且占据100%宽度,可以这样做:
CSS:
```css
.child.hidden {
display: none;
}
.child.showing {
flex: 1 0 100%; /* 当one隐藏,two显示并填满剩余空间 */
}
```
JavaScript示例 (假设有一个切换按钮或事件处理):
```javascript
document.getElementById('toggleButton').addEventListener('click', function() {
var childOne = document.querySelector('.child.one');
var childTwo = document.querySelector('.child.two');
if (childOne.classList.contains('hidden')) {
childOne.classList.remove('hidden');
childTwo.classList.add('showing');
} else {
childOne.classList.add('hidden');
childTwo.classList.remove('showing');
}
});
```
这样,点击按钮时, `.child.one`会隐藏,`.child.two`会展开并充满父元素的宽度。