CSS布局之浮动(一)两列布局
作者:Prower 来源:Prower 发布时间:2008-08-18 21:24:00
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布局之浮动(二) 三列浮动
猜你喜欢
- 周末出去爬山,照了一大堆照片回来,照片同时存储为jpg和DNG格式,我用adobe bridge将dng格式的照片中要保留的筛选出来后,就不
- 一、前言 axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护。二、axios封装步骤安
- PyTorch: https://github.com/shanglianlm0525/PyTorch-Networksimport tor
- 代码很简单,只需要2行代码就可实现想要的功能,虽然很短,但确实使用,主要使用了requests库。测试2XX, 3XX, 4XX, 5XX都
- 我们有时候会需要在网上查找并下载图片,当数量比较少的时候,点击右键保存,很轻松就可以实现图片的下载,但是有些图片进行了特殊设置,点击右键没有
- 视频才用流媒体,有后台实时返回数据, 要支持flash播放, 所以需安装对应的flash插件。当视频播放时,每间隔3秒向后台发送请求供检测心
- 以SQL Server 2012 为例上图是部分数据库的截图, 我们执行DENY VIEW any DATABASE to PUBLIC;然
- 对文件进行重命名直接贴代码: import ossrcFile = './actwork/linkFile/allExtL
- 有一个需求, 需要从数据库中导出两张表的数据到同一个excel中鉴于是临时的业务需求, 直接使用Navicat 进行查询并导出数据.数据涉及
- Microsoft SQL Server™ 2000 提供了两种主要机制来强制业务规则和数据完整性:约束和触发器。触发器是一种特殊类型的存储
- 本文实例讲述了Python基于Matplotlib库简单绘制折线图的方法。分享给大家供大家参考,具体如下:Matplotlib画折线图,有一
- 前言在学习python的过程中,我们会使用到各种各样的第三方库,但是如何pip有n种方法,如系统提示 如在terminal中pip
- 任务异步化打开浏览器,输入地址,按下回车,打开了页面。于是一个HTTP请求(request)就由客户端发送到服务器,服务器处理请求,返回响应
- 公网与私有网络的判断其实十分简单,只要记住私有网络的三个网段。不过,对于记性不好的人或者学识不是很高的机器来说,有一种判断方法还是有必要的。
- 读文件打开文件(文件需要存在)#打开文件f = open("data.txt","r")  
- 在上一篇Python接口自动化测试系列文章:Python接口自动化浅析unittest单元测试原理,主要介绍单元测试,unittest模块特
- 第一种: 如果你使用的是WinXP或者Win2kPro版的系统,你不会出现这个问题,因为你只能把网站放在C:\intpub\wwwroot目
- 制作自己的训练集下图是我们数据的存放格式,在data目录下有验证集与测试集分别对应iris_test, iris_train 为了向伟大的M
- fileinput模块可以对一个或多个文件中的内容进行迭代、遍历等操作。该模块的input()函数有点类似文件readlines()方法,区
- 之前写了个python脚本用selenium+phantomjs爬新帖子,在循环拉取页面的过程中,phantomjs总是block住,使用W