找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2467|回复: 1

[分享] CSS布局之浮动(一)

[复制链接]
发表于 2013-4-18 00:34:38 | 显示全部楼层 |阅读模式 来自 中国–广东–广州
CSS浮动一直是个比较让人郁闷的问题,很多的布局问题都出在浮动上,特别是当浮动的列数很多时,但其实只要理解了两列结构的浮动,面对多列数的浮动也不会再心慌,因为两列结构的左右浮动是最基本的浮动,也是更多浮动的基础,三列、四列等的浮动都是出于此的。

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

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

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 2013-4-18 09:20:52 | 显示全部楼层 来自 中国–北京–北京
这个方法不错,这样一来应该可以减少不必要的浮动了

评分

参与人数 1金币 +5 收起 理由
抢楼评分专号 + 5 很幸运,你获得了抢楼奖励!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-22 04:45 , Processed in 0.042254 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表