三列浮动中间列宽度自适应
今天犯了个很低级的错误。。特此记入历史。。。。。。
本来需要做一个背景图平铺呢。像这样子的
因为需要在移动端的网页，所以就不能直接切背景图来用，所以切了左边一块，后边一块，中间切了一个小竖条，打算平铺。说来说去的重点就是，需要左右定位上去，中间自适应。。。。
结果我今天果然是脑袋不太好使的节奏，做来做去竟然都是这种情况：
可以看出错误吗。平铺过多了，右边本来该露出来的空白都木有露出来呢！
思来想去，各种定位浮动各种使用，把自己都搞的有点儿焦头烂额了，瞬间恍然大悟啊，我竟然给中间的div设置的100%的宽度啊！伤不起啊！！！
现在把最基础的代码贴出来供自己谨记！！！！！
<!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=gb2312" />
<title>三列左右固定宽度中间自适应——AA25.CN</title>
<style>
body{
margin:0px;
}
#left {
background-color: #E8F5FE;
border: 1px solid #A9C9E2;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
left: 0px;
}
#center {
background-color: #F2FDDB;
border: 1px solid #A5CF3D;
height: 400px;
margin-right: 202px;
margin-left: 202px;
}
#right {
background-color: #FFE7F4;
border: 1px solid #F9B3D5;
height: 400px;
width: 200px;
position: absolute;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<div id="left">左列</div>
<div id="center">中列——AA25.CN</div>
<div id="right">右列</div>
</body>
</html>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。华丽的分割线。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
下面再记录一个基础的问题
让一个父级宽高不固定的元素始终居中，首先，父级是position:relative;然后给目标元素position:absolute;
接下来是重点啊！
给目标元素设置一下的样式：
left:50%;
margin-left:负的元素本身宽度的一半;
top:50%;
margin-top:负的元素本身高度的一半;
这样子不管你的窗口肿么变化，不管你的父级怎么改变大小，你都不怕被它甩出去，始终占据中间的位置啦！哈哈！！
