實際項目開發過程中我們經常會遇到頁面div左右布局的需求：左側 div 固定寬度，右側 div 自適應寬度，填充滿剩余頁面，下面整理幾種常用的方案
1 左側 div 設置 float 屬性為 left，右側 div 設置 margin-left 屬性等於或大於左側 div 寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 300px;
background: #bfbfbf;
}
.right {
margin-left: 310px;
height: 300px;
background: #efefef;
}
</style>
</head>
<body>
<p>1 左側 DIV 設置 float 屬性為 left，右側 DIV 設置 margin-left 屬性等於或大於左側 DIV 寬度</p>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
實際效果：
2 左側 div 設置 float 屬性為 left，負邊距 100%，右側 div中嵌套一個 div，頁面內容放入嵌套的 div 中，右側內嵌 div 設置 margin-left 屬性等於或大於左側 div 寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 300px;
background: #bfbfbf;
margin-right: -100%;
}
.right {
float: left;
width: 100%;
}
.right-content {
height: 300px;
margin-left: 310px;
background: #efefef;
}
</style>
</head>
<body>
<p>2左側 DIV 設置 float 屬性為 left，負邊距 100%，右側 DIV 中嵌套一個 DIV，頁面內容放入嵌套的 DIV 中，右側內嵌 DIV 設置 margin-left 屬性等於或大於左側 DIV 寬度</p>
<div class="left">left</div>
<div class="right">
<div class="right-content">right</div>
</div>
</body>
</html>
實際效果：
3 如果將需求修改為右側固定寬度而左側自適應寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style>
html, body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 100%;
height: 300px;
background: #bfbfbf;
margin-right: -300px;
}
.right {
float: right;
width: 300px;
height: 300px;
background: #efefef;
}
</style>
</head>
<body>
<p>3 如果將需求修改為右側固定寬度而左側自適應寬度</p>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
實際效果：
4 左邊左浮動，右邊overflow：hidden 不過這種方法IE6下不兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左邊左浮動，右邊overflow：hidden 不過這種方法IE6下不兼容</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p{
margin: 20px 0;
text-align: center;
}
.left {
float: left;
width: 200px;
height: 200px;
background: #bfbfbf;
}
.right {
overflow: hidden;
height: 200px;
background: #efefef;
}
</style>
</head>
<body>
<p>左邊左浮動，右邊overflow：hidden 不過這種方法IE6下不兼容</p>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</body>
</html>
實際效果：
5 左邊使用絕對定位，右邊使用margin-left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左邊使用絕對定位，右邊使用margin-left</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p{
margin: 20px 0;
text-align: center;
}
.content{
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #bfbfbf;
}
.right {
margin-left: 200px;
height: 200px;
background: #efefef;
}
</style>
</head>
<body>
<p>左邊使用絕對定位，右邊使用margin-left-最外層需要設置相對定位</p>
<div class="content">
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
</body>
</html>
實際效果：
6 左邊絕對定位，右邊也絕對定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左邊絕對定位，右邊也絕對定位</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
margin: 20px 0;
text-align: center;
}
.content {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: #bfbfbf;
}
.right {
position: absolute;
left: 200px;
top: 0;
right: 0;
height: 200px;
background: #efefef;
}
</style>
</head>
<body>
<p>左邊絕對定位，右邊也絕對定位</p>
<div class="content">
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
</body>
</html>
實際效果：
