狂人日记学习 之七 三列浮动中间列宽度自适应
2007-01-02 19:58
281 查看
要实现这个布局，就必须要学习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的时候，他将从本质上与其他对象分离出来，他的定位模式不会影响其他对象，也不会被其他对象的浮动定位所影响，从某种意义上来说，使用了绝对定位属性之后，对象就像一个图层一样浮动在了网页之上。
<style>
body{
margin:0px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
top:0px;
left:0px;
}
#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>
如果将对象设置为absolute,那么对象将根据整个叶面的位置进行重新定位，当使用此属性时，可以使top,right,bottomleft来对上右下左4各方向的距离值，以确定对象的具体位置，
#layout {
postition :absolute ;
top:20px;
left:0px;
}
这个css决定了 id 为layout 的元素永远距离浏览器左边框0px,上边框20px,无论浏览器的大小多大。
也就是说当一个元素的position为absolute的时候，他将从本质上与其他对象分离出来，他的定位模式不会影响其他对象，也不会被其他对象的浮动定位所影响，从某种意义上来说，使用了绝对定位属性之后，对象就像一个图层一样浮动在了网页之上。
<style>
body{
margin:0px;
}
#left{
background-color:#cccccc;
border:2px solid #333333;
width:100px;
height:300px;
position:absolute;
top:0px;
left:0px;
}
#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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 狂人日记学习 之五 左列固定宽度，右列自适应
- 狂人日记学习 之四 宽度的窍门
- HTML/CSS学习之 三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化
- 三列浮动中间列宽度自适应
- 狂人日记学习 之六 2列固定宽度居中
- CSS网页布局入门教程8：三列浮动中间列宽度自适应
- 三列浮动中间列宽度自适应
- 【技术】三列浮动，中间列宽度自适应
- CSS学习笔记（6）--浮动，三列布局，高度宽度自适应
- 狂人日记学习 之二 一列固定宽度 自适应
- 狂人日记学习 之八 高度自适应
- 狂人日记学习 之三 二列固定宽度 float
- 三列浮动中间列宽度自适应
- CSS网页布局入门教程8：三列浮动中间列宽度自适应
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- html中散列布局的实现，中间自适应大小，两边固定宽度
- 自适应宽度，左右两栏固定宽度，中间栏优先加载
- html--三栏布局（两边固定宽度，中间自适应）
- html中间块居中宽度自适应
- 【IOS学习笔记】为UICollectionView设置自适应屏幕宽度以及点击效果