flex 固定一列_css实现两列固定与一列自适应的几种方法
本文介紹了css實現兩列固定與一列自適應的幾種方法，分享給大家，具體如下：
1.flex布局
Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。我們說 flexbox 是一種一維的布局，是因為一個 flexbox 一次只能處理一個維度上的元素布局，一行或者一列。這里我們利用flex布局來實現兩列固定一列自適應
Document#main{
display: flex;/*設為伸縮容器*/
}
#left{
width:200px;/*左側固定寬度*/
height:400px;
background:aqua;
}
#center{
flex-grow:1; /*填滿剩余空間*/
height:400px;
background:green;}
#right{
width:200px;/*固定右側寬度*/
height:400px;
background:blue;
}
2.使用浮動方法
對左右兩部分分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中。對中間文檔流使用margin指定左右外邊距進行定位。
Document*{margin: 0;padding: 0;}
#main{
width: 100%;height: 400px;
}
#left{
width:200px;/*左側固定寬度*/
height:400px;
float: left; /*設置容器左浮動*/
background:aqua;
}
#center{
width: 100%;
height:400px;
margin: 0 200px;/*設置容器左右外邊距*/
background:green;}
#right{
width:200px;/*固定右側寬度*/
height:400px;
float: right;/*設置容器右浮動*/
background:blue;
}
3.使用浮動加calc函數
對三部分使用float:left，然后左右兩邊固定寬度，中間使用calc函數計算寬度。
Document*{margin: 0;padding: 0;}
#main{
width: 100%;height: 400px;
}
#left{
width:200px;/*左側固定寬度*/
height:400px;
float: left; /*設置容器左浮動*/
background:aqua;
}
#center{
width: calc(100% - 400px);/*設置中間寬度為父容器寬度減去400px*/
height:400px;
float: left;/*設置容器左浮動*/
background:green;}
#right{
width:200px;/*固定右側寬度*/
height:400px;
float:left;/*設置容器左浮動*/
background:blue;
}
4.使用絕對定位
用絕對定位把左右兩部分固定在兩端，對中間文檔流使用margin指定左右外邊距進行定位。
Document*{margin: 0;padding: 0;}
#main{
width: 100%;
height: 400px;
position: relative;/*父容器使用相對定位*/
}
#left{
width:200px;/*左側固定寬度*/
height:400px;
position: absolute;/*左側使用固定定位*/
left: 0;/*定位在容器最左邊*/
top: 0;
background:aqua;
}
#center{
width:100%;
height:400px;
margin: 0 200px;/*設置中間容器左右外邊距*/
background:green;}
#right{
width:200px;/*固定右側寬度*/
height:400px;
position: absolute;/*右側使用固定定位*/
right: 0;/*定位在容器最右邊*/
top: 0;
background:blue;
}
效果圖如下：
到此這篇關于css實現兩列固定與一列自適應的幾種方法的文章就介紹到這了,更多相關css 兩列固定 一列自適應內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
總結
以上是生活随笔為你收集整理的flex 固定一列_css实现两列固定与一列自适应的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 画出微型计算机结构图,中级工792、画出
- 下一篇： c语言中的set是置1嘛,c ++ -