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

时间 2019-12-08

标签浮动中间列宽自适应栏目 CSS 繁體版

原文原文链接

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

原本须要作一个背景图平铺呢。像这样子的ui

由于须要在移动端的网页，因此就不能直接切背景图来用，因此切了左边一块，后边一块，中间切了一个小竖条，打算平铺。说来讲去的重点就是，须要左右定位上去，中间自适应。。。。3d

结果我今天果真是脑壳不太好使的节奏，作来作去居然都是这种状况：xml

能够看出错误吗。平铺过多了，右边原本该露出来的空白都木有露出来呢！htm

思来想去，各类定位浮动各类使用，把本身都搞的有点儿焦头烂额了，瞬间恍然大悟啊，我居然给中间的div设置的100%的宽度啊！伤不起啊！！！blog

如今把最基础的代码贴出来供本身谨记！！！！！it

<!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> io

<body>
<div id="left">左列</div>
<div id="center">中列——AA25.CN</div>
<div id="right">右列</div>
</body>
</html>基础

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。华丽的分割线。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。meta

下面再记录一个基础的问题

让一个父级宽高不固定的元素始终居中，首先，父级是position:relative;而后给目标元素position:absolute;

接下来是重点啊！

给目标元素设置一下的样式：

left:50%;

margin-left:负的元素自己宽度的一半;

top:50%;

margin-top:负的元素自己高度的一半;

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