三列浮动中间列宽度自适应
今天犯了個(gè)很低級(jí)的錯(cuò)誤。。特此記入歷史。。。。。。
本來(lái)需要做一個(gè)背景圖平鋪呢。像這樣子的
因?yàn)樾枰谝苿?dòng)端的網(wǎng)頁(yè)，所以就不能直接切背景圖來(lái)用，所以切了左邊一塊，后邊一塊，中間切了一個(gè)小豎條，打算平鋪。說(shuō)來(lái)說(shuō)去的重點(diǎn)就是，需要左右定位上去，中間自適應(yīng)。。。。
結(jié)果我今天果然是腦袋不太好使的節(jié)奏，做來(lái)做去竟然都是這種情況：
可以看出錯(cuò)誤嗎。平鋪過(guò)多了，右邊本來(lái)該露出來(lái)的空白都木有露出來(lái)呢！
思來(lái)想去，各種定位浮動(dòng)各種使用，把自己都搞的有點(diǎn)兒焦頭爛額了，瞬間恍然大悟啊，我竟然給中間的div設(shè)置的100%的寬度啊！傷不起啊！！！
現(xiàn)在把最基礎(chǔ)的代碼貼出來(lái)供自己謹(jǐn)記！！！！！
<!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>三列左右固定寬度中間自適應(yīng)——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>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。華麗的分割線。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
下面再記錄一個(gè)基礎(chǔ)的問(wèn)題
讓一個(gè)父級(jí)寬高不固定的元素始終居中，首先，父級(jí)是position:relative;然后給目標(biāo)元素position:absolute;
接下來(lái)是重點(diǎn)啊！
給目標(biāo)元素設(shè)置一下的樣式：
left:50%;
margin-left:負(fù)的元素本身寬度的一半;
top:50%;
margin-top:負(fù)的元素本身高度的一半;
這樣子不管你的窗口腫么變化，不管你的父級(jí)怎么改變大小，你都不怕被它甩出去，始終占據(jù)中間的位置啦！哈哈！！
轉(zhuǎn)載于:https://www.cnblogs.com/hr2014/p/4226726.html
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
以上是生活随笔為你收集整理的三列浮动中间列宽度自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
