三列浮动中间列宽度自适应

今天犯了个很低级的错误。。特此记入历史。。。。。。

本来需要做一个背景图平铺呢。像这样子的

因为需要在移动端的网页,所以就不能直接切背景图来用,所以切了左边一块,后边一块,中间切了一个小竖条,打算平铺。说来说去的重点就是,需要左右定位上去,中间自适应。。。。

结果我今天果然是脑袋不太好使的节奏,做来做去竟然都是这种情况:

可以看出错误吗。平铺过多了,右边本来该露出来的空白都木有露出来呢!

思来想去,各种定位浮动各种使用,把自己都搞的有点儿焦头烂额了,瞬间恍然大悟啊,我竟然给中间的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;
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;
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:负的元素本身高度的一半;

这样子不管你的窗口肿么变化,不管你的父级怎么改变大小,你都不怕被它甩出去,始终占据中间的位置啦!哈哈!!

原文地址:https://www.cnblogs.com/hr2014/p/4226726.html