兩列自適應(yīng)布局是指左（右）側(cè)有一個(gè)寬度固定的側(cè)邊欄，另一列寬度自適應(yīng)。
一般我們有以下4種實(shí)現(xiàn)方式，廢話不多說(shuō)，直接上代碼：
- 通過(guò)將aside浮動(dòng)，然后設(shè)置main的margin來(lái)實(shí)現(xiàn)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>兩列自適應(yīng)布局</title>
<style>
.wrapper {
height: 300px;
}
.aside {
float: left;
height: 100%;
width: 200px;
background: red;
}
.main {
margin-left: 210px;
height: 100%;
background: blue;
}
</style>
</head>
<body>
<section class="wrapper">
<aside class="aside"></aside>
<section class="main">
main main main main main main
</section>
</section>
</body>
</html>
- 將aside浮動(dòng), 再將main設(shè)置為overflow: auto，觸發(fā)BFC形成獨(dú)立區(qū)域，達(dá)到效果。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>兩列自適應(yīng)布局</title>
<style>
.wrapper {
height: 300px;
}
.aside {
height: 100%;
width: 200px;
background: red;
margin-right: 10px;
float: left;
}
.main {
overflow: auto;
height: 100%;
background: blue;
}
</style>
</head>
<body>
<section class="wrapper">
<aside class="aside"></aside>
<section class="main">
main main main main main main
</section>
</section>
</body>
</html>
- 將aside設(shè)置為絕對(duì)定位，然后通過(guò)設(shè)置aside的width和wrapper的padding來(lái)實(shí)現(xiàn)
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>兩列自適應(yīng)布局</title>
<style>
.wrapper {
position: relative;
padding-left: 210px;
height: 300px;
}
.aside {
position: absolute;
left: 0;
width: 200px;
height: 100%;
background: red;
}
.main {
width: 100%;
height: 100%;
background: blue;
}
</style>
</head>
<body>
<section class="wrapper">
<aside class="aside"></aside>
<section class="main">
main main main main main main
</section>
</section>
</body>
</html>
- 彈性布局
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>兩列自適應(yīng)布局</title>
<style>
.wrapper {
display: flex;
height: 300px;
}
.aside {
width: 200px;
margin-right: 10px;
background: red;
}
.main {
flex: 1;
background: blue;
}
</style>
</head>
<body>
<section class="wrapper">
<aside class="aside"></aside>
<section class="main">
main main main main main main
</section>
</section>
</body>
</html>
