資訊專欄INFORMATION COLUMN
摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應(yīng)回答效果示例解決方案浮動絕對定位彈性布局表格布局網(wǎng)格布局。方案二絕對定位將和的都設(shè)置脫離文檔流，給的設(shè)置左右兩邊距離即左右兩邊盒子的實際寬度。
已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應(yīng)
解決方案（1）浮動；（2）絕對定位；（3）彈性布局；（4）表格布局；（5）網(wǎng)格布局。
拓展問題：（1）每個解決方案的優(yōu)缺點
（2）他們之間的比較，假設(shè)高度去掉，那種方法還能適用或者不適用
（3）解決方案的兼容性，哪個更適用在實際項目中
（1）
A：缺點：浮動脫離文檔流，所以使用的時候要清除浮動；優(yōu)點：兼容性比較好
B：缺點：絕對定位布局脫離文檔，它的子元素也會脫離文檔流；優(yōu)點：使用快捷，不容易出現(xiàn)問題，兼容性也比較好
C：彈性布局是為了解決上述問題出現(xiàn)的，比較完美的一個
D：表格布局比較繁瑣，不利于SEO優(yōu)化；表格布局兼容性比較好，IE8不支持flex，但支持表格。當(dāng)其中的一個單元格超出的，兩側(cè)單元格也會同時增高，根據(jù)場景決定。
E：網(wǎng)格布局作為一個新技術(shù)，可以實現(xiàn)很多復(fù)雜的布局，代碼量簡化很多。
（2）
flex布局和表格布局。浮動布局因為左側(cè)有遮擋，所以沒有超出的文本會在中間出現(xiàn)，超出部分沒有遮擋會再左側(cè)出現(xiàn)。
| 三欄布局 | 兩欄布局 |
|---|---|
| 左右寬度固定，中間自適應(yīng) | 左寬度固定，右自適應(yīng) |
| 上下高度固定，中間自適應(yīng) | 右寬度固定，左自適應(yīng) |
| / | 上高度固定，下自適應(yīng) |
| / | 下高度固定，上自適應(yīng) |
設(shè)置大小盒子的高度為 100px，左右（left 和 right）的 div 寬度固定為 200px, 并分別給三個盒子設(shè)置不同顏色用來區(qū)分。
* {
padding: 0;
margin: 0;
}
.layout {
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
overflow: hidden;
}
.layout div {
height: 100px;
}
.layout .left {
width: 200px;
background-color: blue;
}
.layout .center {
background-color: yellow;
}
.layout .right {
width: 200px;
background-color: red;
}
（1）方案一：浮動
center 的 div 需要放到后面（其余方案都不需要更改 Html 順序），對左右 div 使用 float:left 和 float：right，float 使左右兩個元素脫離文檔流，中間的正常文檔流中。
.float .left {
float: left;
}
.float .right {
float: right;
}
（2）方案二：絕對定位
將 left、right 和 center 的 div 都設(shè)置 absolute 脫離文檔流，給 center 的 div 設(shè)置左右兩邊距離 200px (即左右兩邊盒子的實際寬度)。
.absolute div {
position: absolute;
}
.absolute .left {
left: 0;
}
.absolute .center {
left: 200px;
right: 200px;
}
.absolute .right {
right: 0;
}
（3）方案三：彈性布局
設(shè)置大盒子為 display: flex;，給 center 的 div 設(shè)置 flex: 1，除去左右盒子的寬度外剩余寬度是 center 的寬度。
.flexbox {
display: flex;
}
.center {
flex: 1;
}
（4）方案四：表格布局
設(shè)置大盒子為 display: table;，將 left、right 和 center 的 div 都設(shè)置 display: table-cell 。
.table {
width: 100%;
display: table;
}
.table div{
display: table-cell;
}
（5）方案五：網(wǎng)格布局
就給大盒子設(shè)置屬性。
.grid {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 200px auto 200px;
}
更多文章分享：https://www.artroy.com.cn/
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54200.html
摘要：假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁面布局題目假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁面布局 題目：假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px...
摘要：假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁面布局題目假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁面布局 題目：假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px...
摘要：題目假設(shè)高度已知，請寫出三欄布局，其中左欄右欄寬度各為，中間自適應(yīng)三欄布局的種方案這是一道經(jīng)典的面試題，下面記錄了布局的種方法。 題目:假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應(yīng). 三欄布局的5種方案 這是一道經(jīng)典的面試題，下面記錄了css布局的5種方法。 三欄布局 * { margin: 0; ...
閱讀 1605·2019-08-30 13:18
閱讀 1586·2019-08-29 12:19
閱讀 2129·2019-08-26 13:57
閱讀 4153·2019-08-26 13:22
閱讀 1197·2019-08-26 10:35
閱讀 2999·2019-08-23 18:09
閱讀 2520·2019-08-23 17:19
閱讀 691·2019-08-23 17:18
