本文簡單說明一下左側(cè)定寬右側(cè)自適應(yīng)的實現(xiàn)方法和頁面效果展現(xiàn)。
Html部分代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container"> //父元素
<div class="left"></div> //左側(cè)定寬部分
<div class="right"></div> //右側(cè)自適應(yīng)部分
</div>
</body>
</html>
CSS樣式部分
<style>
*{margin:0;padding:0;}
body{width:100%;height:100%;background: #ccc;}
.container{
width:90%;min-height:400px;background:#fff;
overflow: hidden;
}
/*
左側(cè)定寬部分這里我用了絕對定位，讓它脫離了文檔流單獨在左邊，
不然右側(cè)的自適應(yīng)部分會被頂下去，這個你可以去掉position：absolute試試效果
*/
.left{
width:200px;height:400px;background:red;position:absolute;
}
/*
右側(cè)自適應(yīng)部分要設(shè)個左邊距margin-left，而且要將寬設(shè)置成100%，不然就沒寬
*/
.right{
height:400px;width:100%;margin-left:200px;background:green;float:left;
}
</style>
