手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >三列宽度自适应结构中的的DIV写法
三列宽度自适应结构中的的DIV写法
摘要:适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。CSS#main{width:760px;margin:0auto;}.left{w...

 适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。

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;}

HTML

<!--注意:center这个DIV的位置-->
<div id="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div class="clear"></div>
</div>

【三列宽度自适应结构中的的DIV写法】相关文章:

清除浮动的空DIV方法

css实现连续的英文或数字自动换行的方法

CSS样式表创建美妙绝伦的网站

CSS之DIV长度相等的几个办法

CSS布局——左定宽度右自适应宽度并且等高布局

CSS 控制因Html页面高度导致抖动的问题解决方法

css技巧收藏——经典中的经典

用CSS实现垂直居中的3种方法

垂直三栏布局拥有相同高度的方法

DIV+CSS:网页一行两列背景自适应

精品推荐
分类导航