flex设置方式相对比较简单，只要根据需要，对内部的两部分内容分开就可以了。
float设置方式要考虑左右两部分的内容，并且要记得清除浮动，以免影响显示。
table方式可以设置两边的内容都是单元格。
还有其他的实现方式，可以根据实际项目进行选择。
如何实现网页的左右分栏：1、一个总页面包含了3个iframe
2、3个iframe是从左到右依次排布，分别是左侧树状，右侧列表区，中间的控制页代码如下参考：
<body>
<div onclick="changeWin()">
<p><img src='' name="" id="" style="cursor:hand" vertical-align="middle"></p><!--这个是中间的那个带有小三角的图片-->
</div>
</body>
<script>
function changeWin(){
if( parent.frame.cols != "0,6,*"){
document.all.ctrlimg.src="../images/showframe.gif"
parent.frame.cols = "0,6,*"
} else {
document.all.ctrlimg.src="../images/closeframe.gif"
parent.frame.cols = "210,6,*"
}
}
</script>
此乃层的隐藏与显示也，一、点击左边的缩进图片，左边栏收缩
二、实现的思路
1、图片作为按扭，点击图片触发层的显示和收缩，图片代码如下：
<A href="javascript:show()"><IMG src="image/fclose.gif" align="absmiddle" border="0"></A>
三、源代码
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<TITLE>收缩左边栏效果</TITLE>
<STYLE type="text/css">
td{font-size:12pxline-height:22px}
.red{color: #FF0000}
</STYLE>
<SCRIPT language="JavaScript">
function show(){
if(document.getElementById("left").style.display=='none'){ //判断目前左边栏的状态（显示、隐藏）
document.getElementById("left").style.display='block'//显示左边栏
}
else{document.getElementById("left").style.display='none'//隐藏左边栏
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE width="98%" border="0" cellspacing="0" cellpadding="0" align="center">
<TR>
<TD id="left" width="200">点点右边的收缩按钮，看看我是不是进去了！</TD>
<TD width="8" style="border-right:1 #cccccc solid"><A href="javascript:show()"><IMG src="image/fclose.jpg" align="absmiddle" border="0"></A></TD>
<TD valign="top">右侧</TD>
</TR>
</TABLE>
</BODY>
</HTML>
