首先讲下结构吧,div#left宽度固定,div#right撑满右侧的宽度,当点击按钮后,隐藏div#left,而div#right则自动调整宽度(在这里就是铺满整个页面了):
<button onclick="hideleft()">隐藏菜单</button>
<div id="par">
<div id="left"></div>
<div id="right"></div>
<div>
实现,设置div#left左浮动,然后div#right使用overflow来清除浮动(虽然知道overflow可以清除包含块内子元素的浮动,但是这里是加在子元素div#right的,跟父元素div#par貌似没有多大关系,所以不太明白这里是发生了什么,知道的小伙伴麻烦留言让我学习学习哈):
#left {
width: 200px;
height: 400px;
background-color: lightblue;
float: left; /*这个是关键*/
}
#right {
height: 400px;
background-color: lightcoral;
overflow: hidden; /*这个是关键*/
}