三列浮動中間列寬度自適應

時間 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