狂人日记学习之七三列浮动中间列宽度自适应

要实现这个布局，就必须要学习css中的一个非常重要的定位属性：Position.它有三种可用值：static absolute relative .对于页面中的每一个元素来说，默认都是static 的。
如果将对象设置为absolute,那么对象将根据整个叶面的位置进行重新定位，当使用此属性时，可以使top,right,bottomleft来对上右下左4各方向的距离值，以确定对象的具体位置，
#layout {
postition :absolute ;
top:20px;
left:0px;
}
这个css决定了 id 为layout 的元素永远距离浏览器左边框0px,上边框20px,无论浏览器的大小多大。
也就是说当一个元素的position为absolute的时候，他将从本质上与其他对象分离出来，他的定位模式不会影响其他对象，也不会被其他对象的浮动定位所影响，从某种意义上来说，使用了绝对定位属性之后，对象就像一个图层一样浮动在了网页之上。

}
#center{
background-color:#ccc222;
border:2px solid #333333;
height:300px;
margin-left:100px;
margin-right:100px;
}
#right{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
right:0px;
top:0px;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="center">中列</div>
<div id="right">右列</div>

转载于:https://www.cnblogs.com/FrameWork/archive/2007/01/02/610166.html

狂人日记学习之七三列浮动中间列宽度自适应相关推荐

C# 学习笔记（16）ComboBox下拉列表框宽度自适应
C# 学习笔记(16)ComboBox下拉列表框宽度自适应当下拉列表框中内容宽度大于下拉列表框宽度时下拉列表框不能将内容全部显示出来可以在下拉时,对下拉列表框内容进行重绘 /// <sum ...
三列浮动中间列宽度自适应
今天犯了个很低级的错误..特此记入历史...... 本来需要做一个背景图平铺呢.像这样子的因为需要在移动端的网页,所以就不能直接切背景图来用,所以切了左边一块,后边一块,中间切了一个小竖条,打算平铺 ...
前端学习记录(三) CSS浮动、定位与居中
目录浮动清除浮动方法1: 清除浮动方法2: CSS定位 relative定位 absolute定位 fixed定位居中水平居中垂直居中水平垂直居中浮动现在我们想在页面中 ...
CSS学习（三）—— 浮动与定位
六.浮动与定位 1.浮动 1)浮动基本概念浮动最本质的功能:用来实现并排浮动使用要点:如若要浮动,并排的盒子都要设置浮动:父盒子要有足够宽度,否则盒子会掉下去浮动的顺序贴靠特性:子盒子会按照顺序 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
ag-grid 学习笔记三：ag-grid设置（定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序）
目录一定义列二选择行三设置复选框四设置行高列宽五置顶合计行六底部合计行七行组八客户端排序一定义列表格的列有如下常用属性. 名称说明 headerName 显示的 ...
html列自动变高,HTML 应用多列浮动等高处理
直觉利用浮动写一个三列布局:效果如下,这就是背景. 基于此提供了一个解决方案,来使得三列均按照最高的内容的那个一列的高度为高度.因此问题的关键是为三列的高度提供一个高度的参考点.可以为三列增加一个容器 ...
Python语言学习：利用pandas对两列字段元素求差集(对比两列字段所有元素的异同)
Python语言学习:利用pandas对两列字段元素求差集(对比两列字段所有元素的异同) 目录利用pandas对两列字段元素求差集(对比两列字段所有元素的异同) 输出结果实现代码利用pandas ...
关于某题左列定宽右列宽度自适应布局的学习
今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来... 题目如下: 已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局? <div c ...
Excel基础篇（三）：vlookup根据A列查询B列
单位要采购一批文具,具体清单如下: 文具店老板提供了一份价格表: 如果想计算一下采购这些文具需要申请多少资金,该怎么办呢?有的朋友可能擅长FCV大法--Ctrl+F.Ctrl+C.Ctrl+V--如果 ...

狂人日记学习之七三列浮动中间列宽度自适应