css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式
發(fā)布時(shí)間:2020-10-28 16:35:45 作者:哎呀呀
我要評(píng)論

這篇文章主要介紹了css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
html結(jié)構(gòu)
<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; }
方法二:浮動(dòng)
.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絕對(duì)定位
.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; }
到此這篇關(guān)于css實(shí)現(xiàn)六種自適應(yīng)兩欄布局方式的文章就介紹到這了,更多相關(guān)css 自適應(yīng)兩欄布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css display table 自適應(yīng)高度、寬度問題的解決
這篇文章主要介紹了css display table 自適應(yīng)高度、寬度問題的解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著2021-05-07詳解CSS多種三列自適應(yīng)布局實(shí)現(xiàn)
這篇文章主要介紹了詳解CSS多種三列自適應(yīng)布局實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2021-02-24CSS實(shí)現(xiàn)背景圖片屏幕自適應(yīng)的實(shí)現(xiàn)
這篇文章主要介紹了CSS實(shí)現(xiàn)背景圖片屏幕自適應(yīng)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)2020-12-07css3實(shí)現(xiàn)自適應(yīng)瀏覽器圖片布局特效
css3實(shí)現(xiàn)自適應(yīng)瀏覽器圖片布局特效是一款自適應(yīng)瀏覽器屏幕的水平列表div容器,好友頭像列表水平布局特效。2020-11-23CSS實(shí)現(xiàn)表格首行首列固定和自適應(yīng)窗口的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)表格首行首列固定和自適應(yīng)窗口的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11CSS將img圖片填滿父容器div并自適應(yīng)容器大小
這篇文章主要介紹了CSS將img圖片填滿父容器div并自適應(yīng)容器大小,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2020-10-23css實(shí)現(xiàn)兩欄布局,左側(cè)固定寬,右側(cè)自適應(yīng)的多種方法
今天通過7種方法給大家介紹css實(shí)現(xiàn)兩欄布局,左側(cè)固定寬,右側(cè)自適應(yīng)效果,每種方法通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2021-08-04