相對寬度和絕對寬度衝突時的div解決方法
摘要：一般我們在使用絕對寬度時會使用px，相對寬度時會使用%，但是要是同時使用絕對寬度和相對寬度時該怎麼辦呢？
我們通過一道例題來講解今天的內容：
1.完成圖片上的題目要求
2.嘗試提供這樣一種方案，使得寬度與屏幕等寬，佈局大體與1類似，並且保證你無論怎麼調整瀏覽器的寬度，都可以保證中間部分佈局相對寬度不變化，且格子間的間距均爲10px
題目1很簡單，有許多種解決方案，我就不一一贅述了
分析題目2，發現有兩個關鍵的需求：
相對寬度：格子的相對寬度（比例）不變
絕對寬度：格子間的絕對距離不變
如果只關注相對寬度，那麼很簡單，令左邊格子的寬度爲30%（舉例），右邊各自的寬度爲70%即可；如果只關注絕對寬度，那麼更簡單，令中間的距離爲10px即可。但是同時要滿足時怎麼辦呢？難不成要寫 width：（inherit-10px）*30% 麼？
顯然不可以。我來講講我的解決方案吧（本人小白，如果有疏忽紕漏，或者您有更好的方案，歡迎在評論區指正！）
先寫出大體的盒子框架
<!-- Tiger的代碼世界 -->
<!doctype html>
<html>
<head>
<title>相對寬度和絕對寬度討論</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="top">
</div>
<div class="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
<div id="bottom">
</div>
</body>
</html>top和bottom容器我就不贅述了。我只講中間部分。
首先明確，相對寬度和絕對寬度的問題是不能同時解決的（1.就本題而言 2.歡迎指正）
那我們就把問題拆分：先解決相對寬度，後解決絕對寬度or先解決絕對寬度，後解決相對寬度。就本題而言，前者更簡便一些。而我們怎麼“拆分”問題呢？——當然是容器div啦！
我們先解決相對寬度：
我們讓A和C合併，然後和B用相對寬度描述
這就很簡單了，左邊寬度爲30%，右邊寬度爲70%
那怎麼解決left容器裏面的佈局呢？
我們先想一想：能不能做一個左邊是寬度固定的格子，右邊是寬度可變的格子的容器？當然可以，這不是就是導航欄麼！這個簡單得很，我隨便找一種方法粘在下面了：
#left{
height: 300px;
float: left;
width: 150px;
}
#right{
height: 300px;
width: auto;
margin-left: 150px;
}這樣問題是不是就馬上解決了呢？
所以下次遇到相對和絕對沖突的時候，一定要使用好div這把利器啊！
當然我們也要注意一些小細節，比如如何處理border的問題等，這需要調一下外面容器和裏邊容器的高度（相差2*border-width），並且爲了使right容器和左邊相適應，right裏面還要再套一個div纔行。
盒式模型是css佈局的基本功，大家一定要對其有深刻的理解，才應用在各種變形上。完成這道題還需要對margin、padding（雖然這道題沒有用到）、border以及div的關係有相當的理解，今天我就不再多講了，下次有時間再說。
下面把我的全部代碼粘上，對大家一個參考，要是有更好的方案，一定要在留言區分享哦！
HTML：
<!Tiger的代碼世界>
<!doctype html>
<html>
<head>
<title>CSS佈局練習</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="top">
</div>
<div class="wrapper">
<div id="left">
<div class="innerright"></div>
<div class="inner"></div>
</div>
<div id="right">
<div class="inner"></div>
</div>
</div>
<div id="bottom">
</div>
</body>
</html>CSS：
/*Tiger的代碼世界*/
/*題目中的寬度不明確是加border和margin的寬度還是不加border和margin的寬度
以下皆默認爲不加border和margin的寬度*/
*{
margin: 0px;
padding: 0px;
border-width: 3px;
border-style: solid;
border-color: black;
}
html{
margin: 0;
padding: 0;
border-width: 0;
width: 100%;
}
body{
margin: 0;
padding: 0;
border-width: 0;
}
#top{
margin: 10px;
height: 150px;
}
.wrapper{
margin: 10px;
height: 300px;
width: inherit;
border-width: 0;
}
#left{
height: 300px;
width: 30%;
float: left;
border-width: 0;
}
#left .inner{
height: 294px;
width: auto;
margin-right: 10px;
}
#left .innerright{
height: 294px;
width: 10px;
float: right;
border-width: 0;
margin-left: 10px;
}
#right{
height: 300px;
width: 70%;
float: right;
border-width: 0;
}
#right .inner{
height: 294px;
width: auto;
}
#bottom{
margin: 10px;
height: 150px;
}謝謝閱讀，祝大家學習愉快！