實(shí)現(xiàn)左側(cè)固定,右側(cè)自適應(yīng)。
思路,布局最關(guān)鍵的是讓block元素并排排列,簡(jiǎn)單用float就行。之后就是畫(huà)兩個(gè)矩形就好,也就是寫(xiě)兩個(gè)width和height。
<!DOCTYPE html>
<style>
html,body{
height: 100%;/*高度百分百顯示*/
}
#left{
width: 300px;
height: 100%;/*高度一定要設(shè)置,因?yàn)椴季志鸵粋€(gè)矩形嘛,兩條邊都不說(shuō)怎么畫(huà)矩形*/
background-color: #ccc;
float: left;/* float很重要,否則block元素沒(méi)法并排排列*/
}
#right{
height:100%;
margin-left: 200px;
background-color: pink;
}
</style>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>