CSS布局之浮动(二)三列浮动
作者:Prower 来源:Prower 发布时间:2008-08-19 12:47:00
在上一个文章里写了关于左(右)侧定宽右(左)侧自动缩放的两列浮动,这个文章就要说一下三列浮动的问题了。在之前说过,两列浮动是其他多列浮动的基础,明白了两列浮动的原理后,三列或三列以上的多列浮动也变得简单。
左侧中间定宽,右侧自适应:
因边左侧跟中间都是定宽的,只有右侧是自适应宽度的,所以这个三列浮动是和两列浮动中的左侧定宽右侧自适应一样的道理,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>
<div id=”c”>我是右边</div>
</body>
</html>
只需在两列浮动的CSS样式代码上再做轻微的改动:
#a{float:left; width:200px; background:#aaa;}
#b{float:left; width:200px; background:#f00;}
#c{background:#777; margin-left:400px;}
当然这里要记住一点,那就是必须给b对象一个左浮动。
左侧自适应,中间右侧定宽:
与左侧中间定宽右侧自适应一样的道理,当然前提是要把a、b、c三个对象在HTML的结构代码上更换一下顺序,浏览器的解释顺序应该是c-b-a,因为浮动在未浮动之前:
<body>
<div id=”c”>我是左边</div>
<div id=”b”>我是中间</div>
<div id=”a”>我是右边</div>
</body>
CSS代码如下:
#a{background:#aaa;}
#b{float:right; width:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
左右两侧定宽,中间自适应:
这个布局应该是用得最多的,因为两边侧边栏的定宽,然后中间内容区自适应,这是很多网站常用的布局方式。很多人会在这里使用四个DIV来完成布局,即:
<body>
<div id=”a”>我是左边</div>
<div id=”box”>
<div id=”b”>我是中间</div>
<div id=”c”>我是右边</div>
</div>
</body>
通过一个嵌套的DIV来帮助完成三列浮动,这样的确是可以完成浮动布局的目的,但是不用这个嵌套仍然可以完成三列浮动的目的,既然可以省略一个嵌套,那为什么不省略一个呢?仅仅只需改变b跟c两者的顺序即可达到目的:
<body>
<div id=”a”>我是左边</div>
<div id=”c”>我是右边</div>
<div id=”b”>我是中间</div>
</body>
CSS代码如下:
#a{float:left; width:200px; background:#aaa;}
#b{margin-left:200px; margin-right:200px; background:#f00;}
#c{float:right; width:200px; background:#777;}
这样,在基于两列浮动的基础之上,三列浮动的布局也完成了。
阅读下一篇:CSS布局之浮动(三)自适应
猜你喜欢
- <%If(Request.QueryString("Page")="") ThenPage=1
- 关于CSS中的命名规则(其实我觉得是XHTML元素的命名规则更加合理些)这个问题,已经有很多人在说了,其中也不乏一些真知灼见。不过这种东西也
- 通过status命令,查看Slow queries这一项,如果值长时间>0,说明有查询执行时间过长以下为引用的内容:mysql>
- 当地址栏没有参数"id"时: 代码如下:Request.QueryString["ID"] == n
- 在开始聊我在阿里四个月的网页推广设计之前,我想先来说说我对平面设计和网页设计的认识。它们之间的交集。它们都是集艺术创作、电脑技术和数字技术于
- 摘 要:本文讨论了Visual Basic应用程序访问SQL Server数据库的几种常用的方法,分别说明了每种方法的内部机理并给出了每种方
- <ScriptRUNAT=SERVERLanguage=VBScript>SubApplication_OnStar
- js运行效果,含公历农历,生肖及节日的javascript日历代码:<html><head><meta htt
- JS获取网页中HTML元素的几种方法分析:getElementById getElementsByName getElementsByTag
- 在本文中,此示例标准蓝图的存储过程命名方法只适用于SQL内部,假如你正在创建一个新的存储过程,或是发现一个没有按照这个标准构造的存储过程,即
- FileUpload上传图片(图片不变形) 的实现方法,需要的朋友可以参考下。<style type="text/css&q
- alert table 表名 add column 列名 alter table 表名 drop column 列名 eg: alter t
- 做教育业的网站,会将此遇到这个问题:如何在网页上显示音标?音标为什么显示为乱字符?等等类似的问题。前两天做沪江网某英语页面的时候也碰到了这个
- staytime.asp<% If Request.QueryString("time")&n
- 根据 Dotzler 的统计,IE6 的份额正在缩水,这可能是 2009 年本人听到的第一个好消息。于此同时,Gmail 的浏览器支持列表中
- 在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相
- 有一个查询如下: 代码如下:SELECT c.CustomerId, CompanyName FROM Customers c
- 在用到编辑器时,就会碰到一点,那就是标签的闭合问题,这个问题非常严峻,因为这可能会导致网页显示的整体样式受到破坏。这最近在PJ的functi
- 今天用FrontPage2003,无意中发现一个bug,稍加研究,基本发现这个bug的规律了首先是我的系统版本和Frontpage版本:我的
- 以前我就是一篇博文 就给出一个好用的函数,它在我几篇博文中被广泛运用的。最近看了不少东西,于是便有了这篇博文,以梳理我学到的新东西。毫无疑问