css 列 布局,CSS二列三列布局
本篇文章主要介紹本人最近在CSS學習中總結出的常用的二列&三列布局的幾種方法
二列&三列布局：
image.png
二列布局的特征通常是側欄固定寬度，主欄自適應寬度
三列布局的特征通常是兩邊側欄固定寬度，主欄自適應寬度
實現方式有以下幾種：
a. 浮動布局
原理：首先分別給兩邊側欄左右浮動，然后中間主欄設置左右margin給兩邊側欄留出空間，主欄自適應寬度
DOM文檔：
CSS文檔:
.left{
float: left;
width: 100px;
height: 100px;
background-color: blue;
}
.right{
float: right;
width: 200px;
height: 100px;
background-color: green;
}
.main{
height: 100px;
background-color: red;
margin-left: 120px;
margin-right: 220px;
}
說明：
*如果是二列布局，則去掉一邊側欄，主欄取消那一邊的margin設置。
*注意DOM順序，要先寫兩邊側欄，如果先寫主欄的話會將側欄擠到下一列。
*這種布局的缺點是頁面會首先渲染側欄再渲染主欄。
b. 絕對定位布局
原理：通過絕對定位將兩邊側欄固定，同樣中間主欄設置margin給側欄騰空間，中間主欄自適應。
DOM文檔：
CSS文檔：
.container{
position: relative;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.right{
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
.main{
height: 100px;
background-color: red;
margin-left: 120px;
margin-right: 220px;
}
說明：
*如果是二列布局，則去掉一邊側欄，主欄取消那一邊的margin設置。
*瀏覽器窗口小到一定程度時，主欄與側欄會發生重疊。
c. 圣杯布局
原理：
首先給主欄和側欄都加上左浮動，主欄寬度設置100%，此時左右側欄均被擠下去；
然后給左側欄一個margin-left:-100%，左側欄會從主欄的下面拉到與主欄對齊的左邊，給右側欄一個margin-left:自身寬度，右側欄會從主欄的下面拉到與主欄對齊的右邊；
此時左右側欄會擋住主欄的左右兩邊部分，所以在外層設置左右padding減小主欄寬度，給兩邊側欄騰出空間，但是左右側欄會跟著縮小的主欄一起向中間靠攏。此時使用相對布局，調整兩個側欄到相應的位置。
DOM文檔：
CSS文檔：
.main{
background-color: red;
float: left;
width: 100%;
height: 100px;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: -100%;
position: relative;
left: -100px
}
.right{
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -200px;
position: relative;
right: -200px
}
.container{
padding: 0 200px 0 100px;
}
說明：
*如果是左邊帶有側欄的二欄布局，則去掉右側欄，不要設置主面板的padding-right值，其他操作相同。反之亦然。
*書寫順序不能更改
*當主欄寬度小于側欄寬度時布局會亂，可以設置主欄的min-width或者使用雙飛翼布局。
d. 雙飛翼布局
原理：與圣杯布局相似，都利用了浮動和負邊距，但是在main外面加了一層div，由于側欄的負邊距是相對這個外層div的，所以給main設置左右margin是不會影響左右側欄，也就省去定位的步驟了。
DOM文檔：
CSS文檔：
.wrape{
float: left;
width: 100%;
}
.main{
margin: 0 200px 0 100px;
background-color: red;
height: 100px;
}
.left{
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: -100%;
/* position: relative;
left: -100px */
}
.right{
width: 200px;
height: 100px;
background-color: green;
float: left;
margin-left: -200px;
/* position: relative;
right: -200px */
}
說明：
*如果是左邊帶有側欄的二欄布局，則去掉右側欄，不要設置main-wrap的margin-right值，其他操作相同。反之亦然。
*解決了圣杯布局main的最小寬度不能小于左側欄的缺點.
e. flex布局
DOM文檔：
CSS文檔：
.container{
display: flex;
}
.main {
flex: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
margin-left: 20px;
height: 300px;
background-color: green;
}
說明：
*如果要實現二列的話，直接去掉單邊側欄即可。
*傳統布局步驟復雜繁瑣，而flex布局的flex容器利用實際可用空間動態地調整子元素寬高比和順序，簡單實用，但需要考慮瀏覽器的兼容性。
總結
以上是生活随笔為你收集整理的css 列 布局,CSS二列三列布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 车贷利息怎么算 买车贷款利息怎么计算
- 下一篇： CSS 居中方法集锦