DIV两列并排的标准写法——理解CSS中的float
来源:互联网 发布:淘宝卖文库财富的货源 编辑:程序博客网 时间:2024/06/06 18:25
今天在一个项目中用到了两个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> </div> <div> </div> <div>总结,做DIV并排布局的时候,要保证有且只有一个DIV不是浮动的(没有float属性)。</div>
- DIV两列并排的标准写法——理解CSS中的float
- 理解css中的float
- 建立两列布局的css写法的视频
- css中的并排显示(div/图片均适用)
- 如何理解css中的float
- div中的div并排放置
- DIV+CSS左右两列自适应高度的方法
- html在一行内横向排列并排同行同时显示两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法
- css使两个并排的DIV等高
- CSS常用效果实现002——将多个div横着并排
- DIV+CSS三行两列经典布局
- DIV+CSS一行两列布局
- DIV+CSS三行两列经典布局
- DIV+CSS左右两列自适应高度
- javascript中css的float特殊写法
- css:float的深度理解
- CSS学习笔记:横向两列布局(float、margin)
- 关于div--css-float的感想
- imagemagick用法
- 软件开发人员的作战手册 - 让程序员活的久一点
- WinXP下DDK配置
- 关于 SQL Server安装程序无法获取ASPNET账户的系统账户信息 的解决办法
- 如何实现即时通信?
- DIV两列并排的标准写法——理解CSS中的float
- 扩展性比较好的圆角边框
- ADPCM压缩算法
- 新闻内容入库前过滤
- 设计时注意的几点。
- 会场安排问题
- C++ Builder中使用OpenCV(转)
- LINUX中数据类型
- LINUX中数据类型