兩欄布局
1、左側(cè)固定寬度，右側(cè)自適應(yīng)
方法一： 左側(cè)設(shè)置float:left，右側(cè)設(shè)置margin-left為左側(cè)的寬度。右側(cè)不能設(shè)置float:left。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
width:500px;
height:300px;
float:left;
background:red;
}
#right{
height:300px;
margin-left:500px;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法二： 左側(cè)設(shè)置float:left，右側(cè)設(shè)置overflow:hidden。
利用的是創(chuàng)建一個新的BFC（塊級格式化上下文）來防止文字環(huán)繞的原理來實(shí)現(xiàn)的。BFC就是一個相對獨(dú)立的布局環(huán)境，它內(nèi)部元素的布局不受外面布局的影響。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
width:500px;
height:300px;
float:left;
background:red;
}
#right{
height:300px;
overflow:hidden;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法三： 左側(cè)設(shè)置絕對定位，右側(cè)設(shè)置margin-left為左邊的寬度。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#left{
width:500px;
height:300px;
position:absolute;
left:0px;
top:0px;
background:red;
}
#right{
height:300px;
margin-left:500px;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法四： 父元素設(shè)置display:flex,右側(cè)設(shè)置flex:1
<!doctype html>
<html>
<head>
<style type="text/css">
body{
display:flex;
}
#left{
width:500px;
height:300px;
background:red;
}
#right{
height:300px;
flex:1;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
2、右側(cè)固定寬度，左側(cè)自適應(yīng)
方法一： 左側(cè)設(shè)置margin-right為右側(cè)的寬度，右側(cè)設(shè)置float:right。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
height:300px;
margin-right:300px;
background:red;
}
#right{
width:500px;
height:300px;
float:right;
background:blue;
}
</style>
</head>
<body>
<div id="right"></div>
<div id="left"></div>
</body>
</html>
注意：right要放在left的前面，否則會出現(xiàn)right右浮動后內(nèi)容換行下移的問題。出現(xiàn)該問題的原因是非float的元素和float的元素在一起時(shí)，如果非float的元素在先，那么float的元素將被排斥到下一行。由于right是float的元素，而left是非float的元素，為避免right內(nèi)容換行下移，需要把right放在left的前面。
方法二： 左側(cè)設(shè)置margin-right為右側(cè)的寬度，右側(cè)采用絕對定位，根據(jù)所需的右側(cè)div與瀏覽器窗口的頂端和右邊的距離分別設(shè)置top和right。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#left{
height:300px;
margin-right:500px;
background:red;
}
#right{
width:500px;
height:300px;
position:absolute;
top:0;
right:0;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
此時(shí)left和right的位置前后無關(guān)緊要。
注意：由于body默認(rèn)有margin，對絕對定位的right設(shè)置top:0和right:0會導(dǎo)致左右側(cè)之間有縫隙且不等高，為此，可統(tǒng)一設(shè)置body的margin為0。
方法三： 左側(cè)設(shè)置width為100%，float: left，margin-right為右側(cè)的寬度的負(fù)值，右側(cè)設(shè)置float: right。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
height:300px;
float:left;
width:100%;
margin-right:-500px;
background:red;
}
#right{
width:500px;
height:300px;
float:right;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
方法四： 父元素設(shè)置display:flex，左側(cè)設(shè)置flex:1。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
display:flex;
}
#left{
height:300px;
flex:1;
background:red;
}
#right{
width:500px;
height:300px;
background:blue;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
三欄布局
左右固定寬度，中間自適應(yīng)
方法一：左側(cè)設(shè)置float:left，右側(cè)設(shè)置float：right，中間設(shè)置margin-right為右側(cè)的寬度，margin-left為左側(cè)的寬度。
<!doctype html>
<html>
<head>
<style type="text/css">
#left{
width:200px;
height:300px;
float:left;
background:red;
}
#middle{
height:300px;
margin-left:200px;
margin-right:500px;
background:blue;
}
#right{
width:500px;
height:300px;
float:right;
background:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</body>
</html>
注意：right要放在middle的前面，否則會出現(xiàn)right右浮動后內(nèi)容換行下移的問題。出現(xiàn)該問題的原因是非float的元素和float的元素在一起時(shí)，如果非float的元素在先，那么float的元素將被排斥到下一行。由于right是float的元素，而middle是非float的元素，為避免right內(nèi)容換行下移，需要把right放在middle的前面。
方法二： 中間設(shè)置margin-right為右側(cè)的寬度，margin-left為左側(cè)的寬度，左側(cè)和右側(cè)采用絕對定位，根據(jù)左側(cè)div所需的left與瀏覽器窗口的頂端和左邊的距離分別設(shè)置top和left，根據(jù)所需的右側(cè)div與瀏覽器窗口的頂端和右邊的距離分別設(shè)置top和right。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
}
#left{
width:200px;
height:300px;
position:absolute;
left:0;
top:0;
background:red;
}
#middle{
height:300px;
margin-left:200px;
margin-right:500px;
background:blue;
}
#right{
width:500px;
height:300px;
float:right;
position:absolute;
right:0;
top:0;
background:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
此時(shí)middle和right的位置前后無關(guān)緊要。
注意：由于body默認(rèn)有margin，對絕對定位的left設(shè)置top:0和left:0，right設(shè)置top:0和right:0會導(dǎo)致左右側(cè)和中間之間有縫隙且不等高，為此，可統(tǒng)一設(shè)置body的margin為0。
方法三：父元素設(shè)置display:flex，中間設(shè)置flex:1。
<!doctype html>
<html>
<head>
<style type="text/css">
body{
margin:0;
display:flex;
}
#left{
width:200px;
height:300px;
background:red;
}
#middle{
height:300px;
flex:1;
background:blue;
}
#right{
width:500px;
height:300px;
background:red;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
</body>
</html>
