网站导航网学 原创论文 原创专题 网站设计 最新系统 原创论文 论文降重 发表论文 论文发表 UI设计定制 论文答辩PPT格式排版 期刊发表 论文专题
返回网学首页
网学原创论文
最新论文 推荐专题 热门论文 论文专题
当前位置: 网学 > 设计资源 > DIVCSS技术 > 正文

DIV两列并排的标准写法——理解CSS中的float

论文降重修改服务、格式排版等 获取论文 论文降重及排版 论文发表 相关服务

今天在一个项目中用到了两个DIV左右对齐,我用的是左边的:float:left,右边的float:right,如下:

<style type="text/css">
<!--
#col1 {
background:#eeffee none repeat scroll 0% 0%;
float:left;
width:25%;
height:50px;
}
#col2{
background:#eeeeff none repeat scroll 0% 0%;
float:right;
width:75%;
height:50px;
}
--></style>

<div id="main">  <div id="col1">用firebug可以看到这两个div不在上级div(main)中</div>    <div id="col2"></div> </div>

效果是可以实现两者左右对齐,但我需要让两个DIV没有间隙的靠在一起,于是用firebug调试,居然发现这两个DIV都不在他的上一级ID为main的DIV中(你也可以用firebug调试下看看),我调试了很久,最后删掉CSS中的float:left和float:right,才可以看到终于在main中了。

我隐约想起float的意思就是浮动,应该是浮动在上一级DIV层上的,所以当然不在上一级层中了,查了一下小雨的CSS手册,确实如此。平常以为不写float那么默认就是float=left,其实完全不是的,默认是不浮动的。加个float:left与不加是完全不一样的。

导致犯这个错的原因是我做web开发一直不求甚解,只要求达到效果就行,能灵活运用就行。对理论的都不是很熟,所以才导致这个错误。不过这样也才能真正明白float的作用(我想看CSS教程很难理解出来吧)。

所以这样看来,用float做DIV左右定位并不是很好的选择,怪不得yaml框架中实现两列并排(三列并排另当别论)只用了左边的float:left,右边的都不用float:right,而是设定margin-left来达到效果,这才是DIV并排的标准写法(这样可以仍受上级DIV的限制,而不是像float:left、float:right那样乱浮动,上级main都没法控制它们了),例子如下:(注意这时还是必须设float:left,这样才能使col2往上移,与之并排,col1还是浮动层的,不在main中,但col2在main中,两个div只跟一个div的高度一样)

<style type="text/css">
<!--
#col1 {
background:#eeffee none repeat scroll 0% 0%;
float:left;
width:25%;
height:50px;
}
#col2{
background:#eeeeff none repeat scroll 0% 0%;
margin-left:25%;
height:50px;
}
--></style>  <div id="main">  

<div id="col1">用firebug可以看到这两个div在上级div(main)中</div>    <div id="col2"></div> </div>  <div>&#160;</div>  <div>&#160;</div>  <div>总结,做DIV并排布局的时候,要保证有且只有一个DIV不是浮动的(没有float属性)。</div>

设为首页 | 加入收藏 | 网学首页 | 原创论文 | 计算机原创
版权所有 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2020 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号 常年法律顾问:王律师