分享
 
 
 

CSS布局之浮动(一)

王朝html/css/js·作者佚名  2008-08-16
窄屏简体版  字體: |||超大  

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;}

出处:http://www.prower.cn/technic/195

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有