网络编程
位置:首页>> 网络编程>> 网页设计>> CSS布局之浮动(一)两列布局

CSS布局之浮动(一)两列布局

作者:Prower 来源:Prower 发布时间:2008-08-18 21:24:00 

标签:布局,浮动,css

CSS浮动一直是个比较让人郁闷的问题,很多的布局问题都出在浮动上,特别是当浮动的列数很多时,但其实只要理解了两列结构的浮动,面对多列数的浮动也不会再心慌,因为两列结构的左右浮动是最基本的浮动,也是更多浮动的基础,三列、四列等的浮动都是出于此的。

来看一下几种常见的CSS两列浮动,CSS代码见以下各分类,HTML结构代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS浮动</title>
</head>
<body>
<div id=”a”>开始我是在左边,后面可能到右边</div>
<div id=”b”>开始我是在右边,后面就可能跑到左边去</div>
</body>
</html>

左侧定宽右侧自适应:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00;}

当需要左侧定宽而右侧自动时,则只需要设定a对象为左浮动即可,b对象默认是占整个屏幕的宽度的,但因为a为左浮动并且占了200PX的宽度,b则自动位于a后面。

当然这样会有一个问题,那就是当左侧的内容高度超过右侧时,右侧的高度并不能随之而增高,而当右侧内容高于左侧时,右侧的内容就会流到左侧内容的底下去。

解决这个问题的一个办法是,给b也设置一个浮动,当然并不是设置右浮动,如果是设置的右浮动,当右侧内容少不够一行的宽度时左右两侧中间则会出现空白:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:right;}

给b设置左浮动时,则可以解决中间出现空白的问题,但同样的道理,当b对象内容少不够一行的宽度时时,右侧就会出现空白:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; float:left;}

当然有另外一种两全的解决办法,即设置b对象距离左边的位置,这样即可以达到浮动的目的也可以解决b对象内容过多而流入到a对象下面的问题:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

右侧定宽左侧自适应:

与左侧定宽右侧自动一样的道理,右侧定宽左侧自动同样可以实现:


#a{background:#f00; margin-left:200px;}
#b{float:right; width:200px; background:#aaa;}

如果按照上面的代码,那么你会发现这个代码并不能实现右浮动,b对象显示在a对象的下面,并没有如预期的那样显示成右侧定宽左而自动的效果。因为HTML结构的原因,浮动DIV应该出现在没有浮动的DIV前面,也就是说,如果是按上面的代码,那么<div id=”a”>…</dia>与<div id=”b”>…</dia>的顺序应该调换一下:

<div id=”b”>开始我是在右边,后面就可能跑到左边去</div>
<div id=”a”>开始我是在左边,后面可能到右边</div>

当然,也可以在不改动HTML结构的情况下,利用CSS样式去调整浮动顺序,这也是CSS的优点之一,即可以在不改动原HTML结构的情况下,完成对页面的修改:

#a{float:left; width:200px; background:#aaa;}
#b{background:#f00; margin-left:200px;}

阅读下一篇:CSS布局之浮动(二) 三列浮动

0
投稿

猜你喜欢

  • 那你也许会问及,怎样获取当前系统日期的最大时间值,如yyyy-MM-dd 23:59:59.997。 我们可以使用DATEADD函数,来实现
  • ASP * 页制作中连接Oracle数据库的例子,下面这段代码能够显示,当前用户所能够看到的所有的用户和表,有兴趣的, 可以把每个表的内容上
  • 对于Dreamweaver这个广大用户早有听闻的网页编辑工具,除功能强大外,Dreamweaver一向被推崇为同类网页编辑软件中产生垃圾代码
  • 大家可能经常会遇到这种情况:sql="select * from table"set rs=conn.execute(s
  • 浏览器的出现互联网的出现是人类信息交流方式的一次划时代的革命,在这场革命中有两个技术对互联网的发展起到了决定性的作用:一个技术带来的人类信息
  •  <% Function FileCounter(counter_file) Dim fs,txt,fi
  • 代码如下,另存为asp文件,请传到你的服务器上就可以了马上测一下<%Response.Expires = 0Response.Expi
  • 这是fenye.asp具体代码:以下是引用片段:<%Const maxPagesize=1000 '设置分
  • 下面两个函数实现了对字符串中数字的判断。function   isnaw(str)   f
  • 淘宝商城的 detail 页面“产品详情”部分是商家自定义区块,曾出现这样一个问题:推荐:css行高:line-height属性详解 <
  • 1.如果每页都增加打印时间,又如何设置?打印时间的,你可以参考 for(var i=0;i<page.length;i++)
  • 这个分页使用的是0游标,也就是Rs.Open Sql,Conn,0,1。但是感觉也快不了多少,10万条数据的分页时间300多豪秒之间。代码如
  • 目前使用MySQL的网站,多半同时使用Memcache作为键值缓存。虽然这样的架构极其流行,有众多成功的案例,但过于依赖Memcache,无
  • 1998年,W3C发布HTML 4.0 Specification,里面清清楚楚的写了每个标签的用法和语义。搜索引擎的算法参考了W3C的语义
  • jQuery是一个非常优秀的JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的效
  • 用下列方法可以做到: main.htm<html><body><form action="
  • 今天做项目时,有一个这样的需求,需要动态删除的Tab,比如:可以删除某一个,可以删除多个。每一个Tab对应一个iframe。本来我的代码是这
  •  '************************************* 'asp计算随机数&nb
  • 假设你想找到本书中的某一个句子。你可以一页一页地逐页搜索,但这会花很多时间。而通过使用本书的索引,你可以很快地找到你要搜索的主题。表的索引与
  • 网站内容的入口很大一部分都是依赖于导航系统,而网站的入口很大一部分依赖于搜索系统,这也在一定意义上证明了导航与搜索之间的重叠性。搜索系统可以
手机版 网络编程 asp之家 www.aspxhome.com