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
投稿猜你喜欢
列表添加元素append(),extend(),insert(),+list区别回忆初学python的时候，对列表list添加元素时，对类表- 引入我们在使用mysql数据库时，习惯使用int型作为主键，并设置为自增，这既能够保证唯一，使用起来又很方便，但int型的长度是有限的，如果
- Python 实现微信小程序的用户登录小程序可以通过官方提供的登录邓丽来获取用户身份的标示, 具体文档可以参考 官方文档, 通过流程时序可以
- 一道Python课作业题，大致如下：编写一个类：该类Building应具有以下方法:●一个构造函数，它根本不接受任何参数(除了通常的`sel
- 本文实例讲述了Python实现操纵控制windows注册表的方法。分享给大家供大家参考，具体如下：使用_winreg模块的话基本概念:KEY
- windows下载ziplinux下载tar下载地址：https://www.elastic.co/downloads/elasticsea
- 一、正则与LIKE的区别 Mysql的正则表达式仅仅使SQL语言的一个子集，可以匹配基本的字符、字符串。例如：select * f
- 以前在使用Python的时候，都是使用root用户安装好的全局python，现在，因为root用户安装的Python版本太低，同时自己没有r
- reduce() 函数在 python 2 是内置函数， 从python 3 开始移到了 functools 模块。官方文档是这样介绍的re
- 什么是模式前阵子准备期末考试，劳神又伤身的，实在闲不得空来更新文章，今天和大家说说javascript中的设计模式。首先呢，我们需要知道的是
- vue第四课：v-show,v-if,v-bind的使用1，v-show指令根据表达式的真假，切换元素的显示和隐藏如：广告，遮罩层等<
- 一、背景先要从 InnoDB 的索引实现说起，InnoDB 有两大类索引：聚集索引 (clustered index)普通索引 (secon
- 一个问题纠结很久，反复确认语法问题。但是后来网上搜了一下，茅塞顿开。特此总结一下。mysql> grant select,insert
- text.pytitle = '智能金融起锚:文因、数库、通联瞄准的kensho革命'text = ''&#
- 字符串的编码格式什么是编码格式？通俗来讲，编码格式就是编码的规则在脚本的开头指定编码格式，来告诉操作系统根据什么编码规则来解析代码常见的编码
- asp创建pdf文件代码，详见以下代码：<％Option ExplicitSub CheckXlDriver()&
- 前言我们编写的Web项目部署之后，经常会因为需要进行配置变更或功能迭代而重启服务，单纯的kill -9 pid的方式会强制关闭进程，这样就会
- 前言我们经常会有这样的需求，比如评论功能，每个评论都有可能会有自己的子评论，如果在界面只展示成一列的话非常不美观，也不能体现出他们的层级关系
- 数据类型：float — 浮点数可以精确到小数点后面15位int — 整型可以无限 * ool — 非零为true,零为falselist —
- var iframe = document.createElement("iframe"); iframe.id = &
