網易雲課堂學習筆記二:自適應佈局
定寬+自適應
<div id="app">
<div class="left"></div>
<div class="right"></div>
</div>
1.float(absolute)+margin
.left {float: left;width: 200px;}
.right {margin-left: 120px;}
2.float+overflow
.left {float: left;width: 200px;margin-right:20px;}
.right {overflow:hidden;} //產生BFC
3.table
#app {display: table;table-layout:fixed;width:100%;}//佈局優先
.left, .right { display: table-cell;}//默認均分
.left { width:200px; padding-right:20px;} //margin失效
4.flex
#app {display: flex;}
.left { width: 200px;margin-right:20px;}
.right {flex: 1;}
定寬(多列)+自適應
由 定寬+自適應 類推
<div id="app">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
1.float+margin
.left, .center {float: left; width: 100px;margin-right: 20px;}
.right {margin-left: 240px;}
2.float+overflow
.left, .center {float: left; width: 100px;margin-right: 20px;}
.right {overflow: hidden;}
3.table
#app {display: table;table-layout:fixed;width:100%;}
.left, .center, .right { display: table-cell; padding-right: 20px;}
.left, .center{ width:200px;}
4.flex
#app {display: flex;}
.left, .center{ width: 200px;margin-right:20px;}
.right {flex: 1;}
不定寬+自適應
<div id="app">
<div class="left">我是內容</div>
<div class="right"></div>
</div>
1.float+overflow
.left {float: left;margin-right:20px;}
.right {overflow:hidden;} //產生BFC
2.table
#app {display: table;width:100%;}//內容優先
.left, .right { display: table-cell;}//默認根據內容比例均分
.left { width:1px; padding-right:20px;} //margin失效
3.flex
#app {display: flex;}
.left {margin-right:20px;}
.right {flex: 1;}
不定寬(多列)+自適應
由 不定寬+自適應 類推