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布局之浮动的内容,更多相关文章请关注PHP中文网(www.php.cn)!
推荐阅读
-
css3学习之flex实现几种多列布局
-
Android属性动画Property Animation系列一之ObjectAnimator_html/css_WEB-ITnose
-
font和line-height之CSS代码书写顺序不同,导致显示效果不一样
-
ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据
-
前端笔记之微信小程序(一)初识微信小程序&WXSS与CSS|WXML与HTML的差异&像素和DPR
-
css盒子布局,浮动布局以及显影与简单的动画
-
ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据
-
Bootstrap CSS布局之代码
-
Bootstrap CSS布局之按钮
-
Bootstrap CSS布局之表单