css實現(xiàn)六種自適應兩欄布局方式
發(fā)布時間：2020-10-28 16:35:45 作者：哎呀呀 
我要評論
我要評論這篇文章主要介紹了css實現(xiàn)六種自適應兩欄布局方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
html結構
<body>
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
方法一：flex布局
.wrapper{
display:flex;
}
.left{
width:200px;
height:400px;
background:black;
}
.right{
flex:1;
height:400px;
background:red;
}
方法二：浮動
.left{
float:left;
width:200px;
height:400px;
background:black;
}
.right{
background:red;
height:400px;
}
方法三：BFC
.left{
width:200px;
height:400px;
float:left;
background:black;
}
.right{
overflow:hidden;
height:400px;
background:red;
}
方法四：position絕對定位
.wrapper{
position:relative;
}
.left{
width:200px;
height:400px;
background:black;
}
.right{
position:absolute;
top:0;
left:200px;
right:0;
bottom:0;
background:red;
}
方法五：table布局
.wrapper{
display:table;
width:100%;
}
.left,.right{
display:table-cell;
height:400px
}
.left{
background:black;
}
.right{
background:red;
}
方法六：grid布局
.wrapper{
display:grid;
width:100%;
height:400px;
grid-template-columns:200px auto;
}
.left{
background:black;
}
.right{
background:red;
}
到此這篇關于css實現(xiàn)六種自適應兩欄布局方式的文章就介紹到這了,更多相關css 自適應兩欄布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
css display table 自適應高度、寬度問題的解決
這篇文章主要介紹了css display table 自適應高度、寬度問題的解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2021-05-07
這篇文章主要介紹了詳解CSS多種三列自適應布局實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習2021-02-24
這篇文章主要介紹了CSS實現(xiàn)背景圖片屏幕自適應的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-12-07
css3實現(xiàn)自適應瀏覽器圖片布局特效是一款自適應瀏覽器屏幕的水平列表div容器，好友頭像列表水平布局特效。2020-11-23
CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼
這篇文章主要介紹了CSS實現(xiàn)表格首行首列固定和自適應窗口的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-11- 這篇文章主要介紹了CSS將img圖片填滿父容器div并自適應容器大小,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編2020-10-23
css實現(xiàn)兩欄布局，左側固定寬，右側自適應的多種方法
今天通過7種方法給大家介紹css實現(xiàn)兩欄布局，左側固定寬，右側自適應效果，每種方法通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-08-04
