實現左側固定,右側自適應。
思路,布局最關鍵的是讓block元素并排排列,簡單用float就行。之后就是畫兩個矩形就好,也就是寫兩個width和height。
<!DOCTYPE html>
<style>
html,body{
height: 100%;/*高度百分百顯示*/
}
#left{
width: 300px;
height: 100%;/*高度一定要設置,因為布局就一個矩形嘛,兩條邊都不說怎么畫矩形*/
background-color: #ccc;
float: left;/* float很重要,否則block元素沒法并排排列*/
}
#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>