当前位置:首页 > DIV+CSS教程 > 正文

CSS网页布局入门教程4:二列固定宽度

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2009-02-17 我要评论(42)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

有了一列固定宽度作为基础,二列固定宽度就非常简单,我们知道div用于对某一个区域的标识,而二列的布局,自然需要用到两个div,XHTML代码如下:

<div id="left">左列</div>
<div id="right">右列</div>

新的代码结构中使用了两个id,分别为left和right,表示两个div的名称,我们所需要做的是,首先设置它们的宽度,然后让两个div在水平行中并排显示,从而形成二列式的布局,CSS代码如下:


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

left与right两个div的代码与前面类似,都使用相同宽高,本例中为了区分,左列和右列分别用了不同的边框和背景色。而为了实现二列式布局,我们使用了一个全新的属性——float。float属性是CSS布局中非常重要的一个属性,用于控制对象的浮动布局方式,我们的大部分div布局基本上都通过float的控制来实现布局,float的可选参数为:none/left/right。
float使用none值时表示对象不浮动,而使用left时,对象将向左浮动,例如本例中的div使用了float:left;之后,右侧的内容将流到当前对象的右侧。使用right时,对象将向右浮动,如果将#left的float值设置为right,将使得#left对象浮动到网页右侧,而#right对象则由于float:left;属性浮动到网页左侧。
这样,在动用了简单的float属性之后,二列固定宽度的而已就能够完整的显示出来。
具体操作步骤如下:
新建页面,插入div可以参考:CSS网页布局入门教程1:一列固定宽度
当插入一个div后,接着插入第二个时,在插入div标签的插入会多出一个选项:在选定内容旁换行,这样插入就把这个div标签插入到了id为left的div之内,这并不是本例所要的结果,所以我们选择在标签之后,然后在右侧激活的下拉列表中找到<div id="#left">,这样我们插入的id为right的div就插入到了left的后边。如下图所示:
 


left的css设置如下:

 







right的设置只有与left的边框和背景色不同而已,可以参照left的自行设置。
 

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: CSS 教程 二列

所属专题:入门教程

更多评论(42)..会员评论

Ziowarner(119.139.*.*) 发表于:2014-03-18 10:10:30
我估计很多初学者到这里就看不懂了。(CSS网页布局入门教程1:一列固定宽度)是没有加float: left参数的。如果只要我们复制代码,那还有什么意义?现在代码少还能查出问题,代码多了,我们就很难找出来了。所以讲课要细点,照顾初学者。
faildd(123.138.*.*) 发表于:2010-12-26 00:26:43
??都向左浮动啊!最初以为一个向左浮动了,另一个就应该向右浮动,然后又要将两个浮动添加到一个父级里调整父级属性。今天纠正一下。谢谢老大。。
kiko(121.33.*.*) 发表于:2010-11-04 14:40:50
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #layout { background-color: #66FFFF; height:200px; width: 300px; border: 5px solid #CCFFFF; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } #left { background-color: #CCFF99; float: left; height: 300px; width: 200px; border: 3px solid #99FFCC; } --> </style> </head> <body> <div id="layout">此处显示 id "layout" 的内容</div> <div id="left">此处显示 id "left" 的内容</div> </body> </html> 我的代码是这样的啊
sinianfu(125.47.*.*) 发表于:2010-07-08 09:48:03
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #layout1 { background-color: #00CCFF; height: 200px; width: 100px; float: left; } #layout2 { background-color: #3399FF; height: 200px; width: 100px; border-top-color: #66CCFF; border-right-color: #66CCFF; border-bottom-color: #66CCFF; border-left-color: #66CCFF; float: left; } --> </style> </head> <body> <div id="layout1">此处显示 id "layout1" 的内容</div> <div id="layout2">此处显示 id 啊实打实的内容</div> </body> </html> 老师以后 我把第一个对象和第二个对象float都设置为left才能达到这章教程的效果 为什么我插入标签没有那个选项
管理员回复:插入哪个标签没有哪个选项?
ping791020(123.15.*.*) 发表于:2010-07-07 10:57:21
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> <!-- #zuo { background-color: #99CCFF; height: 200px; width: 300px; border: 2px solid #0066FF; } #zhongjian { background-color: #FFFFFF; float: left; height: 200px; width: 300px; border: 2px solid #FF6600; } --> </style> </head> <body> <div id="zuo">此处显示 id "zuo" 的内容</div> <div id="zhongjian">此处显示 id "zhongjian" 的内容</div> </body> </html> 老师帮忙看下老是上下排列而不是左右排列。谢谢
管理员回复:你把zuo也浮动试试
ping791020(123.15.*.*) 发表于:2010-07-07 10:50:28
老师你好,为什么我做的二列固定宽度 是上下两行(也就是上面一个,下面一个),而不是在一行上2个? 帮忙解答,谢谢。
管理员回复:请认真对照本节教程的代码
jiaquan2401(125.38.*.*) 发表于:2010-05-20 16:37:52
float: left; 这一讲的关键内容被你忽略了...所以上下排列了.
songaixiang(119.162.*.*) 发表于:2010-05-17 16:30:38
float的浮动是相对于网页呢还是相对于前一个对象?
管理员回复:相对于当前对象

出差旅游免费预订酒店

【视频教程】新手常见问题