首页 > 代码库 > div+css两列布局与三列布局
div+css两列布局与三列布局
一、两列布局：
1.左边定宽，右边自适应。
方法一：采用position：absollute;并设置margin-left的值。
例：
#left{ position:absolute; width:300px; top:0px; left:0px; background:#F00;}
#right{ background:#0FC; margin-left:300px;}<div id="left">左边定宽</div> <div id="right">右边自适应</div>
方法二：采用float;并设置overflow:auto;(隐藏溢出的内容)
例：
#left { float: left; width: 300px; background-color: blue;}#right { overflow: auto; background-color: red;}<div id="left">左边自适应</div><div id="right">右边定宽</div>
二、三列布局：
方法一：与两列布局类似，左右两边设置position：absolute；和top:0;left:0;right:0;
中间设置margin-left和margin-right即可.
*{ padding:0px; margin:0px;}#left,#right{ position:absolute; width: 300px; top:0; background-color: #0FC;}#left{ left:0;}#right{ right:0;}#main{ margin:0 300px; background-color:#999;}<div id="left">左边定宽</div><div id="main">中间自适应</div><div id="right">右边定宽</div>
方法二：左右采用float,中间设置 overflow:auto;和margin:0 300px;
*{ padding:0px; margin:0px;}#left,#right{ float:left; width: 300px; background-color: #0FC;}#right{ overflow:auto; float:right;}#main{ margin:0 300px; background-color:#999;}<div id="left">左边定宽</div><div id="right">右边定宽</div><div id="main">中间自适应</div>
ps:欢迎指正优化
div+css两列布局与三列布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。