CSS Position（2）
作者：糖伴西红柿 来源：前端观察 发布时间：2009-05-17 14:27:00
5. 两栏绝对定位
现在就可以使用相对定位和绝对定位来做一个两栏布局了。
#div-1 { position:relative;}#div-1a { position:absolute; top:0; right:0; width:200px;}#div-1b { position:absolute; top:0; left:0; width:200px;}
6. 两栏绝对定位定高
一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合，因为一般我们不知道元素中会有多少文本，或者将要使用的精确的字号。
#div-1 { position:relative; height:250px;}#div-1a { position:absolute; top:0; right:0; width:200px;}#div-1b { position:absolute; top:0; left:0; width:200px;}
7. 浮动
对于可变高度的列来说，绝对定位就不起作用了，以下是另外一个方案。
我们可以浮动一个元素，使它移动到左边/右边，并且是文本环绕着它。这主要用于图像，但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。
#div-1a { float:left; width:200px;}
8. 浮动列
如果我们把一个元素向左浮动，并且把第二个元素也向左浮动，they will push up against each other。
#div-1a { float:left; width:150px;}#div-1b { float:left; width:150px;}
9. 清除浮动列
在浮动元素之后，我们可以清除浮动来使其他元素正确定位。
#div-1a { float:left; width:190px;}#div-1b { float:left; width:190px;}#div-1c { clear:both;}
糖伴西红柿说：虽然我一直用浮动布局，但是掌握好 position 也是必须的，其实也没那么难的。。。
0
投稿猜你喜欢
- 在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中主要是提及了CSS的命名规则，仔细阅读后，我认为这
- 步骤——1:定位在通过与客户,或与和客户接触的业务人员交流,做出一个准确的定位.定位的准确与否,虽然不能决定一定通过,但如果定位不准或相差太
- 内容摘要：本文介绍了使用asp来JMail v4.3发信的大部分常用方法，包括邮件基本信息、身份验证、附件等。无需很多的修改就可以
- 相关文章推荐：各种北京2008奥运会倒计时Flash2008北京奥运会倒计时js代码 全套北京2008奥运会倒计时屏保<!DOCTYP
- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
有时候我们会在页面上显示用户的所在地区，这个原理是：先得到用户的IP，然后去查询将IP转换成一个数值，最后去查这个数值所在的范围，来得到用户- <％ pagenum=55'指定打印行数 ％> <HTML> <HEAD> <
- 当我们使用一个数据库时，总希望数据库的内容是可靠的、正确的，但由于计算机系统的故障（包括机器故障、介质故障、误操作等），数据库有时也可能遭到
- 由于现在在公司负责制作标准的静态页面，为了增强客户体验，所以经常要做些AJAX效果，也学你也和我一样在，学习AJAX。而设计AJAX时使用的
- 我们打开Google的时候可能大家会发现，无论你输入Google的任何网址，它都根据你使用的语言自动判断并跳转到不同的语言界面。也就是你用不
- ASP具备动态输出任一Office应用程序文件格式的功能。在开始编写代码之前，我们首先需要做的就是设置正确的文件类型，因为浏览器需要知道如何
- mysql数据库里，对一个已创建的表进行DDL操作，比如说添加一个字段。在做测试时，发现ddl操作的时间特别的长。
- 今天处理了一个日期选择器的ie和ff的兼容问题，本来这种情况就很难找错误，找了好久才把错误定位到js中创建元素的方法document.cre
- 鉴于ASP脚本语言是在服务器端IIS或PWS中解释和运行，并可动态生成普通的HTML网页，然后再传送到客户端供浏览的这一特点。我们要在本机上
- 这些天因为有数据割接的需求，于是有要写关于批量更新的程序。我们的数据库使用的是SQLSERVER2005，碰到了一些问题来分享下。首先注意S
- 写ASP程序时，一般情况总是使用的VBScript，不过也不只是这一种选择，也可以用JScript。但在用JScript作为ASP的语言时，
- 本文总结了input的各种使用方法，挺全面的1.取消按钮按下时的虚线框在input里添加属性值 hideFocus 或者 HideFocus
- JavaScript游戏开发之键盘控制层的移动截图：<html> <head> <meta http-equi
- Oracle中有多种方法可以向数据库或服务器文件系统上载文件，这里主要介绍如下三种：Oracle HTTP Server（OHS）的mod_
- 存储过程采用的是select top 加 not in的方式完成，速度也算是相当快了 我测试过了百万级数据量一般查询在1秒一下，贴出来大家交
