UC知道div/css 如何实现左右分栏，左侧菜单能展开/隐藏
来源：百度知道 编辑：UC知道 时间：2024/06/22 07:40:48
类似下面这个table布局的效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><title>左右分栏</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<SCRIPT language=JavaScript>
//左右
function switchSysBarl(){
var imgsrc;
imgsrc=document.all("makeleft").src;
if (imgsrc.indexOf("menu_close")>1){
document.all("makeleft").src="img/menu_open.gif";
document.all("makeleft").title="显示左边的菜单";
parent.document.all("bbs_left").style.display="none";
}
else{
document.all("makeleft").src="img/menu_close.gif";
document.all("makeleft").title="隐藏左边的菜单";
parent.document.all("bbs_left").style.display="&quo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><title>左右分栏</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR>
<SCRIPT language=JavaScript>
//左右
function switchSysBarl(){
var imgsrc;
imgsrc=document.all("makeleft").src;
if (imgsrc.indexOf("menu_close")>1){
document.all("makeleft").src="img/menu_open.gif";
document.all("makeleft").title="显示左边的菜单";
parent.document.all("bbs_left").style.display="none";
}
else{
document.all("makeleft").src="img/menu_close.gif";
document.all("makeleft").title="隐藏左边的菜单";
parent.document.all("bbs_left").style.display="&quo
这个 最好 用 table 或者给 div 用table的 格式 div 是不能自动扩充的。
例table：
《table》
《tr》
《td》
《div》第一个《/div》
《/td》
《td》
《div》第二个《/div》
《/td》
《/tr》
《/table》
这样把第一个 td 隐藏了，第二个td 会 自动扩充。
div 的
css
<style>
html, body{
margin: 0;
height: 100%;
}
.main{
background:#ccc;
width: 100%;
height: 100%;
margin: auto;
min-width: 1000px;
}
.top_nav{
background:#ff0;
width: 100%;
height: 5%;
min-height: 30px;
}
.content{
background:blue;
width: 100%;
height: 90%;
display: table;
}
.toolbar{
background:red;
width: 10%;
height: 100%;
display: table-cell;
}
.main_container{
display: table-cell;
width: 90%;
height: 100%;
}
.ddd{
float: right;<