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