三列浮动中间列宽度自适应
今天犯了個很低級的錯誤。。特此記入歷史。。。。。。
本來需要做一個背景圖平鋪呢。像這樣子的
因為需要在移動端的網頁，所以就不能直接切背景圖來用，所以切了左邊一塊，后邊一塊，中間切了一個小豎條，打算平鋪。說來說去的重點就是，需要左右定位上去，中間自適應。。。。
結果我今天果然是腦袋不太好使的節奏，做來做去竟然都是這種情況：
可以看出錯誤嗎。平鋪過多了，右邊本來該露出來的空白都木有露出來呢！
思來想去，各種定位浮動各種使用，把自己都搞的有點兒焦頭爛額了，瞬間恍然大悟啊，我竟然給中間的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:負的元素本身高度的一半;
這樣子不管你的窗口腫么變化，不管你的父級怎么改變大小，你都不怕被它甩出去，始終占據中間的位置啦！哈哈！！
轉載于:https://www.cnblogs.com/hr2014/p/4226726.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的三列浮动中间列宽度自适应的全部內容，希望文章能夠幫你解決所遇到的問題。
