div三列宽度自适应结构实现代码

发布时间:2020-03-31编辑:脚本学堂
实现div三列宽度自适应结构的一段代码,适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应,不了解的朋友参考下。

div三列宽度自适应div+css教程

1、css样式
 

复制代码 代码示例:
#main{
width:760px;
margin:0 auto;
}
.left{
width:100px;
float:left;
}
.right{
width:120px;
float:right;
}
.center{
margin:0 120px 0 100px;
width:auto;
}
.clear{clear: both;}

2、html部分
 

复制代码 代码示例:
<!--注意:center这个div的位置-->
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div class="clear"></div>
</div>